css - Bootstrap 3 垂直对齐 div 不起作用

Question

我尝试了以下方法来垂直对齐 div ( fiddle) 中的文本:

<div class="container-fluid">
    <div class="row">
        <div class="col-xs-2">
            This should not be vertically centered
        </div>
        <div class="col-xs-2" style="display: table-cell; vertical-align: middle;">
            This should be vertically centered
        </div>
    </div>
</div>

但是，文本仍然保持顶部对齐!我究竟做错了什么？

_{^{(注意:这不是重复的，因为这个问题的重复问题都推荐以上作为解决方案:我在问为什么解决方案对我不起作用)。}}

Answer 1

它是顶部对齐的，但除非您更改高度，否则它看起来与中间或底部对齐相同。

你现在有什么，但是在 div 中添加了背景颜色:

<div class="container-fluid">
    <div class="row">
        <div class="col-xs-2" style="background: #bbb;">
            This should not be vertically centered
        </div>
        <div class="col-xs-2" style="background: #888; display: table-cell; vertical-align: middle;">
            This should be vertically centered
        </div>
    </div>
</div>

如果给每个高度都设置 50 像素，您会看到什么:

<div class="container-fluid">
    <div class="row">
        <div class="col-xs-2" style="background: #bbb; height: 50px;">
            This should not be vertically centered
        </div>
        <div class="col-xs-2" style="background: #888; height: 50px; display: table-cell; vertical-align: middle;">
            This should be vertically centered
        </div>
    </div>
</div>