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

Question

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

编辑 抱歉造成混淆，我的目标是垂直对齐第二个 DIV 内的 button。类似于 this .

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

我已经尝试使用 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 的所有行吧？}