垂直对齐流体 DIV 中的内容

Posted 2023-03-05

【中文标题】垂直对齐流体 DIV 中的内容

【英文标题】：Vertically align content in a fluid DIV

【发布时间】：2014-10-18 17:02:55

【问题描述】：

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

编辑对不起，我的目标是垂直对齐第二个DIV 内的button。类似this。

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

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

【问题讨论】：

你想让第二个 div 在第一个下面吗？

具体来说，您要垂直对齐什么？

不知道你真正想做什么。可以解释你的期望

你的问题是什么？

抱歉给您带来了困惑，我已经用更多信息编辑了这个问题。

【参考方案1】：

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

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

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

中心值：

flex 项目的边距框位于行内的横轴的中心。 （如果 flex line 的 cross size 小于 flex item 的 cross size，则会在两个方向上均等溢出。）

因此，您可以使用以下声明向.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 的行，是吗？}

【讨论】：

其实它并没有我最初想象的那么好。当空间变小时，内容（在这种情况下是按钮）会从两个 DIV（父级和包含按钮的 DIV）中消失。 Screenshot。如果您将col-xs-6 更改为col-sm-6，您会发现流畅的布局效果不太好（与表格相同），它应该创建一个新行而不是将内容压缩到一定大小。

@rekt ...the content get's out of both DIVs 我无法重现它，如果您能在 jsfiddle 上演示该问题，那就太好了。但是关于第二个问题，您可以通过使用 @media 查询来限制 .vertical-align 选择器应用于特定的屏幕尺寸，如下所示：onhttp://jsfiddle.net/hashem/g6puyohg/6/

【参考方案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>

【讨论】：

我相信他想要一个表格布局

这有两个问题，您需要将class="col-md-6" 添加到表<td> 而不是DIV，并且它不适用于流体布局，因为当空间变得太小时被挤压并且永远不会换行。