Question

下面的简单html。目的是使左跨度高度为外部div高度的100％，并使其文本垂直居中（即“abc”应与“ghi”成为一行）。截图结果（chrome，win10）：样式没有效果。

“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％高度但不是居中文字的范围。不知道为什么结果与铬不同。

Answer 1

对父div使用以下样式将子div / span的文本居中：

window

在您的代码中，更改以下行：

style="display: flex;align-items: center;"

到

<div class="col-md-6" style="background-color: lightblue;">

Answer 2

你可以使用div而不是span，但是给出span display:block可以做到这一点

<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;
        }
         span{
           display:block;
         }
    </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>

使跨度高度为外部div高度的100％

2 个答案: