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>

div中的Bootstrap 3垂直对齐不起作用

1 个答案: