与 Bootstrap 3 垂直对齐

Question

我正在使用 Twitter Bootstrap 3，当我想垂直对齐两个 div 时遇到问题，例如 — JSFiddle 链接：

 <!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<div class="row">
  <div class="col-xs-5">
    <div style="height:5em;border:1px solid #000">Big</div>
  </div>
  <div class="col-xs-5">
    <div style="height:3em;border:1px solid #F00">Small</div>
  </div>
</div>

Bootstrap 中的网格系统使用 float: left ，而不是 display:inline-block ，所以属性 vertical-align 不起作用。我尝试使用 margin-top 来修复它，但我认为这不是响应式设计的好解决方案。

原文由 corinem 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

This answer presents a hack，但我强烈建议您使用 flexbox（如 @Haschem answer 中所述），因为现在到处都支持它。

演示链接：

• 引导程序 3

• 引导程序 4 阿尔法 6

您仍然可以在需要时使用自定义类：

 .vcenter {
    display: inline-block;
    vertical-align: middle;
    float: none;
}

 <div class="row">
    <div class="col-xs-5 col-md-3 col-lg-1 vcenter">
        <div style="height:10em;border:1px solid #000">Big</div>
    </div><!--
    --><div class="col-xs-5 col-md-7 col-lg-9 vcenter">
        <div style="height:3em;border:1px solid #F00">Small</div>
    </div>
</div>

靴子

使用 inline-block 如果您在代码中留出实际空间（例如 ...</div> </div>... ），则会在块之间添加额外的空间。如果列大小加起来达到 12，这个额外的空间会破坏我们的网格：

 <div class="row">
    <div class="col-xs-6 col-md-4 col-lg-2 vcenter">
        <div style="height:10em;border:1px solid #000">Big</div>
    </div>
    <div class="col-xs-6 col-md-8 col-lg-10 vcenter">
        <div style="height:3em;border:1px solid #F00">Small</div>
    </div>
</div>

在这里，我们在 <div class="[...] col-lg-2"> 和 <div class="[...] col-lg-10"> 之间有额外的空格（一个回车符和 2 个制表符/8 个空格）。所以…

让我们踢这个额外的空间！

 <div class="row">
    <div class="col-xs-6 col-md-4 col-lg-2 vcenter">
        <div style="height:10em;border:1px solid #000">Big</div>
    </div><!--
    --><div class="col-xs-6 col-md-8 col-lg-10 vcenter">
        <div style="height:3em;border:1px solid #F00">Small</div>
    </div>
</div>

注意到 看似 无用的注释 <!-- ... --> 了吗？它们很 重要——没有它们， <div> 元素之间的空白将占用布局空间，破坏网格系统。

注意：Bootply 已更新

原文由 zessx 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

灵活的盒子布局

随着 CSS Flexible Box 的出现，许多网页设计师的噩梦1都得到了解决。最hacky的之一，垂直对齐。现在即使在 未知的高度 也是可能的。

“二十年的布局黑客即将结束。也许不是明天，但很快，我们的余生。”

— CSS 传奇人物 Eric Meyer 在 W3Conf 2013

Flexible Box（或简称Flexbox），是一种专门为布局目的而设计的新型布局系统。 规范指出：

Flex 布局表面上类似于块布局。它缺少许多可用于块布局的更复杂的以文本或文档为中心的属性，例如浮动和列。作为回报，它获得了简单而强大的工具，用于以网络应用程序和复杂网页通常需要的方式分配空间和对齐内容。

在这种情况下它有什么帮助？好吧，走着瞧。

---

垂直对齐的列

使用 Twitter Bootstrap，我们有 .row 有一些 .col-* s。我们需要做的就是将所需的 .row 2显示为一个 弹性容器 框，然后通过 align-items 属性垂直对齐其所有 弹性项目（列）。

此处示例 （请仔细阅读评论）

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

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

输出

彩色区域显示列的填充框。

澄清 align-items: center

8.3 横轴对齐： align-items 属性

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

align-items: center; 通过中心值， 弹性项目 的边距框在该行内的 交叉轴上 居中。

---

大警报

重要说明 #1： Twitter Bootstrap 不会在超小型设备中指定 width 列，除非您为列提供 .col-xs-# 类之一。

因此，在这个特定的演示中，我使用了 .col-xs-* 类，以便在移动模式下正确显示列，因为它明确指定了列的 width 。

但也可以通过在特定屏幕尺寸下将 display: block; 更改为 display: flex; 来 关闭 Flexbox 布局。例如：

 /* Extra small devices (767px and down) */
@media (max-width: 767px) {
    .row.vertical-align {
        display: block; /* Turn off the flexible box layout */
    }
}

或者您可以 仅 在特定屏幕尺寸上指定 .vertical-align ， 如下所示：

 /* Small devices (tablets, 768px and up) */
@media (min-width: 768px) {
    .row.vertical-align {
        display: flex;
        align-items: center;
    }
}

在那种情况下，我会采用 @KevinNelson 的 方法。

重要说明 #2： 为简洁起见省略了供应商前缀。 Flexbox 语法在此期间发生了变化。新的书面语法不适用于旧版本的网络浏览器（但不像 Internet Explorer 9 那样旧！Internet Explorer 10 及更高版本支持 Flexbox）。

这意味着您还应该在生产模式下使用供应商前缀的属性，如 display: -webkit-box 等等。

如果您在 演示 中单击 “切换编译视图” ，您将看到 CSS 声明的前缀版本（感谢 Autoprefixer ）。

---

垂直对齐内容的全高列

正如您在 前面的演示 中所见，列（弹性项目）不再与其容器（弹性容器框。即 .row 元素）一样高。

这是因为使用 center align-items 属性的值。默认值为 stretch 以便项目可以填充父元素的整个高度。

为了解决这个问题，您也可以将 display: flex; 添加到列中：

此处示例 （再次注意评论）

 .vertical-align {
  display: flex;
  flex-direction: row;
}

.vertical-align > [class^="col-"],
.vertical-align > [class*=" col-"] {
  display: flex;
  align-items: center;     /* Align the flex-items vertically */
  justify-content: center; /* Optional, to align inner flex-items
                              horizontally within the column  */
}

输出

彩色区域显示列的填充框。

最后但 同样重要的是，请注意此处的演示和代码片段旨在为您提供不同的想法，以提供一种实现目标的现代方法。如果您打算在现实世界的网站或应用程序中使用这种方法，请注意“ 大警报”部分。

---

对于包括浏览器支持在内的进一步阅读，这些资源将很有用：

• Mozilla 开发者网络 - 灵活的盒子
• Flexbox 指南 - CSS 技巧
• HTML5Rocks - Flexbox 快速
• SmashingMagazine - 使用 Flexbox 居中元素
• Philip Walton - 由 Flexbox 解决
• 我可以使用：灵活的盒子布局模块

---

1. 垂直对齐 div 内具有响应高度的图像2. 最好使用附加类，以免更改 Twitter Bootstrap 的默认值 .row 。

原文由 Hashem Qolami 发布，翻译遵循 CC BY-SA 3.0 许可协议