html - 垂直对齐流体 DIV 中的内容

Question

这是我的代码:http://jsfiddle.net/g6puyohg/

编辑抱歉造成困惑，我的目标是垂直对齐第二个DIV内的按钮。类似于 this .

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

我尝试过 display: table; 方法，但没有成功，因为它需要固定的高度。

Answer 1

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

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

Flex items can be aligned in the cross axis of the current line of the flex container, similar to justify-content but in the perpendicular direction. align-items sets the default alignment for all of the flex container’s items, including anonymous flex items.

center value:

The flex item’s margin box is centered in the cross axis within the line. (If the cross size of the flex line is less than that of the flex item, it will overflow equally in both directions.)

因此，您可以使用以下声明向 .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;
}

要进一步阅读(包括浏览器支持)，您可以引用以下资源:

• https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes
• http://css-tricks.com/snippets/css/a-guide-to-flexbox/
• http://philipwalton.github.io/solved-by-flexbox/

---

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