与Bootstrap 3垂直对齐

本文翻译自：vertical-align with Bootstrap 3

I'm using Twitter Bootstrap 3, and I have problems when I want to align vertically two div , for example — JSFiddle link : 我正在使用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> 

The grid system in Bootstrap uses float: left , not display:inline-block , so the property vertical-align doesn't work. Bootstrap中的网格系统使用float: left ，而不使用display:inline-block ，因此属性vertical-align不起作用。 I tried using margin-top to fix it, but I think this is not a good solution for the responsive design. 我尝试使用margin-top进行修复，但是对于响应式设计，这不是一个好的解决方案。

---

#1楼

参考：https://stackoom.com/question/1ODQR/与Bootstrap-垂直对齐

---

#2楼

This answer presents a hack, but I would highly recommend you to use flexbox (as stated in @Haschem answer ), since it's now supported everywhere. 这个答案是一个hack，但是我强烈建议您使用flexbox（如@Haschem answer中所述 ），因为现在它在任何地方都受支持。

Demos link: 演示链接：
- Bootstrap 3 - 引导程序3
- Bootstrap 4 alpha 6 -Bootstrap 4 Alpha 6

You still can use a custom class when you need it: 您仍然可以在需要时使用自定义类：

 .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 自举

Using inline-block adds extra space between blocks if you let a real space in your code (like ...</div> </div>... ). 如果在代码中...</div> </div>...实际空间（例如...</div> </div>... ），则使用inline-block会在块之间添加额外的空间。 This extra space breaks our grid if column sizes add up to 12: 如果列大小总计为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>

Here, we've got extra spaces between <div class="[...] col-lg-2"> and <div class="[...] col-lg-10"> (a carriage return and 2 tabs/8 spaces). 在这里，我们在<div class="[...] col-lg-2">和<div class="[...] col-lg-10">之间有多余的空格（回车符和2制表符/ 8个空格）。 And so... 所以...

Let's kick this extra space!! 让我们踢这个额外的空间！

<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>

Notice the seemingly useless comments <!-- ... --> ? 注意看似无用的注释<!-- ... --> -...- <!-- ... -->吗？ They are important -- without them, the whitespace between the <div> elements will take up space in the layout, breaking the grid system. 它们很重要 -没有它们， <div>元素之间的空格将占据布局中的空间，从而破坏网格系统。

Note: the Bootply has been updated 注意：Bootply已更新

---

#3楼

Try this in the CSS of the div: 在div的CSS中尝试以下操作：

display: table-cell;
vertical-align: middle;

---

#4楼

I genuinely find the following code works using Chrome and not other browsers than the currently selected answer: 我确实发现以下代码可以在Chrome浏览器上运行，而不是当前所选答案以外的其他浏览器上运行：

.v-center {
    display:table!important; height:125px;
}

.v-center div[class*='col-'] {
   display: table-cell!important;
   vertical-align:middle;
   float:none;
}
.v-center img {
   max-height:125px;
}

Bootply Link 自举链接

You may need to amend the heights (specifically on .v-center ) and remove/change div on div[class*='col-'] for your needs. 您可能需要修改高度（特别是在.v-center ），并根据需要删除/更改div[class*='col-']上的div[class*='col-'] 。

---

#5楼

I ran into the same situation where I wanted to align a few div elements vertically in a row and found that Bootstrap classes col-xx-xx applies style to the div as float: left. 我遇到了同样的情况，我想在一行中垂直对齐几个div元素，发现Bootstrap类col-xx-xx将样式作为float应用于div：左。

I had to apply the style on the div elements like style="Float:none" and all my div elements started vertically aligned. 我必须将样式应用于诸如style =“ Float：none”之类的div元素上，并且所有div元素都开始垂直对齐。 Here is the working example: 这是工作示例：

<div class="col-lg-4" style="float:none;">

JsFiddle Link JsFiddle链接

Just in case someone wants to read more about the float property: 万一有人想阅读有关float属性的更多信息：

W3Schools - Float W3Schools-浮动

---

#6楼

Flexible box layout 灵活的盒子布局

With the advent of the CSS Flexible Box , many of web designers' nightmares ¹ have been resolved. 随着CSS Flexible Box的问世，许多Web设计师的噩梦¹得到了解决。 One of the most hacky ones, the vertical alignment. hacky之一，垂直对齐。 Now it is possible even in unknown heights . 现在即使在未知高度也有可能。

"Two decades of layout hacks are coming to an end. Maybe not tomorrow, but soon, and for the rest of our lives." “两十年的布局黑客活动即将结束。也许不是明天，而是很快，还有我们的余生。”

— CSS Legendary Eric Meyer at W3Conf 2013 — CSS传奇Eric Meyer在W3Conf 2013上

Flexible Box (or in short, Flexbox), is a new layout system that is specifically designed for layout purposes. 柔性箱（或简称为Flexbox）是一种专门用于布局目的的新布局系统。 The specification states : 规格说明 ：

Flex layout is superficially similar to block layout. Flex布局在表面上类似于块布局。 It lacks many of the more complex text- or document-centric properties that can be used in block layout, such as floats and columns. 它缺少许多可用于块布局的更复杂的以文本或文档为中心的属性，例如浮点数和列。 In return it gains simple and powerful tools for distributing space and aligning content in ways that webapps and complex web pages often need. 作为回报，它获得了简单而强大的工具，可以按照Web应用程序和复杂网页经常需要的方式来分配空间和对齐内容。

How can it help in this case? 在这种情况下如何提供帮助？ Well, let's see. 好吧，走着瞧。

---

Vertical aligned columns 垂直对齐的列

Using Twitter Bootstrap we have .row s having some .col-* s. 使用Twitter Bootstrap，我们的.row具有一些.col-* 。 All we need to do is to display the desired .row ² as a flex container box and then align all its flex item s (the columns) vertically by align-items property. 我们需要做的是将所需的.row ²显示为flex容器框，然后通过align-items属性将其所有flex项目 s（各列）垂直align-items 。

EXAMPLE HERE (Please read the comments with care) 此处示例 （请仔细阅读评论）

<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;
}

The Output 输出

Colored area displays the padding-box of columns. 彩色区域显示列的填充框。

Clarifying on align-items: center 澄清align-items: center

8.3 Cross-axis Alignment: the align-items property 8.3跨轴对齐： align-items属性

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. 伸缩项可以在伸缩容器的当前行的横轴上对齐，类似于justify-content但在垂直方向上justify-content 。 align-items sets the default alignment for all of the flex container's items, including anonymous flex items . align-items设置所有flex容器align-items的默认对齐方式，包括匿名flex项目 。

align-items: center; By center value, the flex item 's margin box is centered in the cross axis within the line. 通过中心值， 弹性项目的边距框在行内的交叉轴中居中。

---

Big Alert 大警报

Important note #1: Twitter Bootstrap doesn't specify the width of columns in extra small devices unless you give one of .col-xs-# classes to the columns. 重要说明＃1：除非您将.col-xs-#类之一提供给列，否则Twitter Bootstrap不会在超小型设备中指定列的width 。

Therefore in this particular demo, I have used .col-xs-* classes in order for columns to be displayed properly in mobile mode, because it specifies the width of the column explicitly. 因此，在此特定演示中，我使用了.col-xs-*类，以便在移动模式下正确显示列，因为它明确指定了列的width 。

But alternatively you could switch off the Flexbox layout simply by changing display: flex; 但是，您也可以仅通过更改display: flex; 关闭 Flexbox布局display: flex; to display: block; display: block; in specific screen sizes. 在特定的屏幕尺寸。 For instance: 例如：

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

Or you could specify .vertical-align only on specific screen sizes like so: 或者，您可以仅在特定的屏幕尺寸上指定.vertical-align ，如下所示：

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

In that case, I'd go with @KevinNelson 's approach . 在这种情况下，我会采用@KevinNelson的方法 。

Important note #2: Vendor prefixes omitted due to brevity. 重要说明＃2：由于简洁，省略了供应商前缀。 Flexbox syntax has been changed during the time. Flexbox语法在此期间已更改。 The new written syntax won't work on older versions of web browsers (but not that old as Internet Explorer 9! Flexbox is supported on Internet Explorer 10 and later). 新的书面语法在旧版本的Web浏览器上将不起作用（但不能与Internet Explorer 9一样旧！Internet Explorer 10和更高版本支持Flexbox）。

This means you should also use vendor-prefixed properties like display: -webkit-box and so on in production mode. 这意味着您还应该在生产模式下使用供应商前缀的属性，例如display: -webkit-box等等。

If you click on "Toggle Compiled View" in the Demo , you'll see the prefixed version of CSS declarations (thanks to Autoprefixer ). 如果在演示中单击“切换编译视图” ，您将看到CSS声明的前缀版本（这要归功于Autoprefixer ）。

---

Full-height columns with vertical aligned contents 具有垂直对齐内容的全高列

As you see in the previous demo , columns (the flex items) are no longer as high as their container (the flex container box. ie the .row element). 如您在上一个演示中所看到的，列（弹性项目）不再与其容器（弹性容器框，即.row元素）一样高。

This is because of using center value for align-items property. 这是因为对align-items属性使用了center值。 The default value is stretch so that the items can fill the entire height of the parent element. 默认值为stretch以便项目可以填充父元素的整个高度。

In order to fix that, you can add display: flex; 为了解决这个问题，您可以添加display: flex; to the columns as well: 以及列：

EXAMPLE HERE (Again, mind the comments) 此处示例 （再次，请注意评论）

.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  */
}

The Output 输出

Colored area displays the padding-box of columns. 彩色区域显示列的填充框。

Last, but not least , notice that the demos and code snippets here are meant to give you a different idea, to provide a modern approach to achieve the goal. 最后但并非最不重要的一点是 ，请注意，此处的演示和代码段旨在为您提供不同的想法，从而提供一种实现目标的现代方法。 Please mind the " Big Alert " section if you are going to use this approach in real world websites or applications. 如果要在现实世界的网站或应用程序中使用此方法，请注意“ 大警报 ”部分。

---

For further reading including browser support, these resources would be useful: 为了进一步阅读，包括浏览器支持，这些资源将很有用：

• Mozilla Developer Network - Flexible boxes Mozilla开发人员网络-柔性盒
• Guide To Flexbox - CSS Tricks Flexbox指南-CSS技巧
• HTML5Rocks - Flexbox quick HTML5Rocks-Flexbox快速
• SmashingMagazine - Centering Elements with Flexbox SmashingMagazine-Flexbox的居中元素
• Philip Walton - Solved By Flexbox 菲利普·沃尔顿-通过Flexbox解决
• Can I Use: Flexible Box Layout Module 我可以使用：灵活的盒式布局模块

---

^{1. Vertically align an image inside a div with responsive height2. It's better to use an additional class in order not to alter Twitter Bootstrap's default .row . 1. 将div内的图像与响应高度垂直对齐2.最好使用其他类，以免更改Twitter Bootstrap的默认.row 。}