Question

编辑我们的目标是在第二个button内垂直对齐DIV。类似于this。

我不想为第二个height定义固定的DIV，因为我希望它支持不同的屏幕尺寸（桌面和移动设备）。

我尝试使用display: table;方法并且无法正常工作，因为它需要固定的高度。

Answer 1

感谢CSS Flexible Box，现在即使在未知高度也可以进行垂直对齐。

<强> 8.3 Cross-axis Alignment: the align-items and align-self properties

Flex items可以在当前行的cross axis中对齐   flex容器，类似于justify-content但在垂直方向   方向。 align-items设置所有flex的默认对齐方式   容器的项目，包括匿名弹性项目。

中心值：

弹性项目的边距框位于线条内的横轴中心。（如果柔性线的交叉尺寸小于弹性项的交叉尺寸，则它将在两个方向上均匀溢出。）

因此，您可以使用以下声明向.row ¹元素添加一个额外的类：

<强> EXAMPLE HERE

<div class="container-fluid">
    <div class="row vertical-align"> <!-- 
             Here --^                 -->
        <div class="col-xs-6"> ... </div>
        <div class="col-xs-6"> ... </div>
    </div>
</div>

.vertical-align {
    display: flex;
    align-items: center;
}

如需进一步阅读（包括浏览器支持），您可以参考以下资源：

^{1。您真的不想改变所有Twitter Bootstrap的行吗？}

Answer 2

我猜您希望按钮垂直对齐。

您可以使用实际的表格，查看此更新的小提琴：http://jsfiddle.net/g6puyohg/3/

代码：

<div class="row">
    <table style='width:100%'>
        <tr>
            <td>
                <div class="col-xs-6">
                    <h2>Header X</h2>
                    <h4>Header Y</h4>
                    <p>
                        Text X
                    </p>
                    <p>
                        <b>Bold X</b>
                        <ul>
                            <li>Line X</li>
                            <li>Line Y</li>
                            <li>Line Z</li>
                        </ul>
                    </p>
                </div>
            </td>
            <td>
                <div class="col-xs-6" style="text-align: center; vertical-align: middle;">
                    <button type="button" class="btn btn-primary btn-lg">Button X</button>
                </div>
            </td>
        </tr>
    </table>
</div>

垂直对齐流体DIV中的内容

2 个答案: