下面是简单的 html。目的是使左侧跨度高度为外部 div 高度的 100%，然后将其文本垂直居中(即“abc”应与“ghi”合二为一)。截图结果(chrome，win10):styles 没有效果。
“row-eq-height”用于制作相同高度的列并从 here 复制而来.
<html>
<head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<style>
.row-eq-height {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
</style>
</head>
<body>
<div class="container">
<div style="display: table;">
<div class="row row-eq-height">
<div class="col-md-6" style="background-color: lightblue">
<span style="height: 100%; display: inline-block; vertical-align: middle; background-color: lightgreen">abc</span>
</div>
<div class="col-md-6" style="background-color: lightcoral">
def<br/>ghi<br/>jkl
</div>
</div>
</div>
</div>
</body>
</html> 
我应该如何修复它才能使跨度为高度的 100%？
UPD:SOF 的“运行代码片段”显示 100% 高度但文本未居中的跨度。想知道为什么结果与 chrome 不同。
最佳答案
对父 div 使用以下样式使子 div/span 的文本居中:
style="display: flex;align-items: center;"
在您的代码中，更改以下行:
<div class="col-md-6" style="background-color: lightblue;">
进入
<div class="col-md-6" style="background-color: lightblue;display: flex;align-items: center;">
关于html - 使跨度高度为外部 div 高度的 100%，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42165121/