协慌网

 登录 贡献 社区

与 Bootstrap 3 垂直对齐

我正在使用 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来修复它，但我认为这不是响应式设计的好解决方案。

答案

这个答案提出了一个黑客，但我强烈建议你使用 flexbox（如@Haschem 答案中所述 ），因为它现在在任何地方都受到支持。

演示链接：
- Bootstrap 3
- Bootstrap 4 alpha 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>

Bootply

如果在代码中放置一个真实空间（如...</div> </div>... ），则使用inline-block会在块之间添加额外的空间。如果列大小合计为 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 已更新

灵活的盒子布局

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

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

- 2013 年 W3Conf 上的 CSS 传奇Eric Meyer

Flexible Box（或简称 Flexbox）是一种专为布局目的而设计的新布局系统。 规范说明 ：

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

在这种情况下，它如何帮助？好的，我们等着瞧。

垂直对齐的列

使用 Twitter Bootstrap 我们有.row s 有一些.col-* s。我们需要做的就是将所需的.row 2显示为弹性容器盒，然后通过align-items属性垂直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;
}

输出

Twitter Bootstrap中的垂直对齐列

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

澄清align-items: center

8.3 Cross-axis Alignment： align-items属性

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

align-items: center;按中心值， 弹性项目的边距框位于线条内的横轴中心。

大警报

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

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

但另外，您可以通过更改display: flex; 关闭 Flexbox 布局display: flex; display: block;在特定的屏幕尺寸。例如： 

/* 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 语法在此期间已更改。新的书面语法不适用于旧版本的 Web 浏览器（但不像 Internet Explorer 9 那样旧！Internet Explorer 10 及更高版本支持 Flexbox）。

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

如果单击Demo中的“Toggle Compiled View” ，您将看到 CSS 声明的前缀版本（感谢Autoprefixer ）。

具有垂直对齐内容的全高柱

正如您在上一个演示中所看到的，列（弹性项）不再像其容器一样高（弹性容器盒。即.row元素）。

这是因为align-items属性使用center值。默认值为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  */
}

输出

在Twitter Bootstrap中具有垂直对齐内容的全高列

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

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

有关浏览器支持的进一步阅读，这些资源将非常有用：

1. 垂直对齐 div 内的图像，响应高度为 2. 最好使用其他类，以免改变 Twitter Bootstrap 的默认.row 。

以下代码对我有用： 

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