Html 与 Bootstrap 3 垂直对齐
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20547819/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
vertical-align with Bootstrap 3
提问by corinem
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-aligndoesn't work. I tried using margin-topto fix it, but I think this is not a good solution for the responsive design.
Bootstrap 中的网格系统使用float: left，而不是display:inline-block，因此该属性vertical-align不起作用。我尝试使用margin-top修复它，但我认为这对于响应式设计来说不是一个好的解决方案。
回答by zessx
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.
这个答案提出了一个技巧，但我强烈建议您使用 flexbox（如@Haschem 答案中所述），因为它现在在任何地方都得到支持。
Demos link:
- Bootstrap 3
- Bootstrap 4 alpha 6
演示链接：
- Bootstrap 3
- 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>Using inline-blockadds extra space between blocks if you let a real space in your code (like ...</div> </div>...). This extra space breaks our grid if column sizes add up to 12:
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>
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). And so...
在这里，我们在<div class="[...] col-lg-2">和之间有额外的空格<div class="[...] col-lg-10">（一个回车和 2 个制表符/8 个空格）。所以...
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 seeminglyuseless 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 已更新
回答by Hashem Qolami
Flexible box layout
灵活的盒子布局
With the advent of the CSS Flexible Box, many of web designers' nightmares1have been resolved. One of the most hacky ones, the vertical alignment. Now it is possible even in unknown heights.
随着CSS 弹性盒的出现，许多网页设计师的噩梦1都得到了解决。最棘手的问题之一，垂直对齐。现在即使在未知的高度也是可能的。
"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 Meyerat W3Conf 2013
“二十年的布局黑客即将结束。也许不是明天，但很快，并且在我们的余生中。”
- CSS传奇埃里克·迈耶在W3Conf 2013
Flexible Box (or in short, Flexbox), is a new layout system that is specifically designed for layout purposes. The specification states:
弹性盒（或简称 Flexbox）是一种新的布局系统，专为布局目的而设计。该规范规定：
Flex layout is superficially similar to block layout. 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.
Flex 布局表面上类似于块布局。它缺少许多可用于块布局的更复杂的以文本或以文档为中心的属性，例如浮动和列。作为回报，它获得了简单而强大的工具，用于以 web 应用程序和复杂网页经常需要的方式分配空间和对齐内容。
How can it help in this case? Well, let's see.
在这种情况下它如何提供帮助？走着瞧。
Vertical aligned columns
垂直对齐的列
Using Twitter Bootstrap we have .rows having some .col-*s. All we need to do is to display the desired .row2as a flex containerbox and then align all its flex items (the columns) vertically by align-itemsproperty.
使用 Twitter Bootstrap 我们有.row一些.col-*s。我们需要做的就是将所需的.row2显示为一个flex 容器框，然后按属性垂直对齐它的所有flex 项（列）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-itemspropertyFlex itemscan be aligned in the cross axisof the current line of the flex container, similar to
justify-contentbut in the perpendicular direction.align-itemssets the default alignment for all of the flex container's items, including anonymous flex items.
align-items: center;By center value, the flex item's margin box is centered in the cross axiswithin the line.
Flex 项目可以在 flex 容器当前行的交叉轴上对齐，类似于
justify-content但在垂直方向上。align-items设置所有弹性容器项目的默认对齐方式，包括匿名弹性项目。
Big Alert
大警报
Important note #1:Twitter Bootstrap doesn't specify the widthof columns in extra small devices unless you give one of .col-xs-#classes to the columns.
重要说明 #1：Twitter Bootstrap 不会指定width超小型设备中的列，除非您为.col-xs-#列提供类之一。
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 widthof the column explicitly.
因此，在这个特定的演示中，我使用了.col-xs-*类以便在移动模式下正确显示列，因为它明确指定width了列的 。
But alternatively you could switch offthe Flexbox layout simply by changing display: flex;to display: block;in specific screen sizes. For instance:
但是，您也可以通过更改为特定屏幕尺寸来关闭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 */
}
}
Or you could specify .vertical-alignonlyon specific screen sizeslike 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. Flexbox syntax has been changed during the time. 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).
重要说明#2：为简洁起见，省略了供应商前缀。Flexbox 语法在此期间已更改。新编写的语法不适用于旧版本的 Web 浏览器（但不如 Internet Explorer 9 旧！Internet Explorer 10 及更高版本支持 Flexbox）。
This means you should also use vendor-prefixed properties like display: -webkit-boxand 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).
如果您在Demo 中单击“Toggle Compiled View”，您将看到 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. i.e. the .rowelement).
正如你在前面的演示中看到的，列（弹性项目）不再与它们的容器（弹性容器框。即.row元素）一样高。
This is because of using centervalue for align-itemsproperty. The default value is stretchso that the items can fill the entire height of the parent element.
这是因为使用centervaluealign-items属性。默认值是stretch项目可以填充父元素的整个高度。
In order to fix that, you can add display: flex;to the columns as well:
为了解决这个问题，您也可以添加display: flex;到列中：
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
- Guide To Flexbox - CSS Tricks
- HTML5Rocks - Flexbox quick
- SmashingMagazine - Centering Elements with Flexbox
- Philip Walton - Solved By Flexbox
- Can I Use: Flexible Box Layout Module
- Mozilla 开发者网络 - 灵活的盒子
- Flexbox 指南 - CSS 技巧
- HTML5Rocks - Flexbox 快速
- SmashingMagazine - 使用 Flexbox 居中元素
- Philip Walton - 由 Flexbox 解决
- 我可以使用：灵活的盒子布局模块
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。
回答by Thanga
The below code worked for me:
以下代码对我有用：
.vertical-align {
display: flex;
align-items: center;
}
回答by Zim
Update 2020
2020 年更新
I know the original question was for Bootstrap 3, but now that Bootstrap 4 has been released, here is some updated guidance on vertical center.
我知道最初的问题是针对 Bootstrap 3，但是现在 Bootstrap 4 已经发布，这里有一些关于垂直中心的更新指南。
Important!Vertical center is relative to the heightof the parent
重要的！垂直中心是相对于父级的高度
If the parent of the element your trying to center has no defined height, noneof the vertical centering solutions will work!
如果你试图中心元素的父一直没有明确的 高度，没有垂直中心解决方案将工作！
Bootstrap 4
引导程序 4
Now that Bootstrap 4 is flexbox by defaultthere are many different approaches to vertical alignment using: auto-margins, flexbox utils, or the display utilsalong with vertical align utils. At first "vertical align utils" seems obvious, but these onlywork with inline and table display elements. Here are some Bootstrap 4 vertical centering options..
现在 Bootstrap 4默认是flexbox，有许多不同的垂直对齐方法使用：auto-margins、flexbox utils或显示 utils以及垂直对齐 utils。起初“垂直对齐实用程序”似乎很明显，但这些仅适用于内联和表格显示元素。这里有一些 Bootstrap 4 垂直居中选项。
1 - Vertical Center Using Auto Margins:
1 - 使用自动边距的垂直中心：
Another way to vertically center is to use my-auto. This will center the element within its container. For example, h-100makes the row full height, and my-autowill vertically center the col-sm-12column.
另一种垂直居中的方法是使用my-auto. 这将使元素在其容器内居中。例如，h-100使行全高，并使列my-auto垂直居中col-sm-12。
<div class="row h-100">
<div class="col-sm-12 my-auto">
<div class="card card-block w-25">Card</div>
</div>
</div>
Bootstrap 4 - Vertical center using auto-margins Demo
my-autorepresents margins on the vertical y-axis and is equivalent to:
my-auto表示垂直 y 轴上的边距，相当于：
margin-top: auto;
margin-bottom: auto;
2 - Vertical Center with Flexbox:
2 - 带有 Flexbox 的垂直中心：
Since Bootstrap 4 .rowis now display:flexyou can simply use align-self-centeron any column to vertically center it...
由于 Bootstrap 4.row现在是display:flex您可以简单地align-self-center在任何列上使用以将其垂直居中...
<div class="row">
<div class="col-6 align-self-center">
<div class="card card-block">
Center
</div>
</div>
<div class="col-6">
<div class="card card-inverse card-danger">
Taller
</div>
</div>
</div>
or, use align-items-centeron the entire .rowto vertically center align all col-*in the row...
或者，align-items-center在整个行中使用.row垂直居中对齐所有col-*...
<div class="row align-items-center">
<div class="col-6">
<div class="card card-block">
Center
</div>
</div>
<div class="col-6">
<div class="card card-inverse card-danger">
Taller
</div>
</div>
</div>
Bootstrap 4 - Vertical center different height columns Demo
3 - Vertical Center Using Display Utils:
3 - 使用 Display Utils 的垂直居中：
Bootstrap 4 has display utilsthat can be used for display:table, display:table-cell, display:inline, etc.. These can be used with the vertical alignment utilsto align inline, inline-block or table cell elements.
自举4具有显示utils的，可以被用于display:table，display:table-cell，display:inline等。这些可与所使用的垂直取向utils的要对齐的内联，内联块或表格单元格的元件。
<div class="row h-50">
<div class="col-sm-12 h-100 d-table">
<div class="card card-block d-table-cell align-middle">
I am centered vertically
</div>
</div>
</div>
Bootstrap 4 - Vertical center using display utils Demo
Bootstrap 4 - 使用 display utils Demo垂直居中
Also see: Vertical Align Center in Bootstrap 4
另请参阅： Bootstrap 4 中的垂直对齐中心
Bootstrap 3
引导程序 3
Flexbox method on the container of the item(s) to center:
项目的容器上的 Flexbox 方法居中：
.display-flex-center {
display: flex;
align-items: center;
}
Transform translateY method:
变换 translateY 方法：
.transform-center-parent {
position: relative;
transform-style: preserve-3d;
}
.transform-center {
position: relative;
top: 50%;
transform: translateY(-50%);
}
Display inline method:
显示内联方法：
.display-inline-block {
display: inline;
}
.display-inline-block > div {
display: inline-block;
float: none;
vertical-align: middle;
}
回答by user2249160
Try this in the CSS of the div:
在 div 的 CSS 中试试这个：
display: table-cell;
vertical-align: middle;
回答by Kevin Nelson
I thought I'd share my "solution" in case it helps anyone else who isn't familiar with the @media queries themselves.
我想我会分享我的“解决方案”，以防它帮助任何不熟悉 @media 查询本身的人。
Thanks to @HashemQolami's answer, I built some media queries that would work mobile-up like the col-* classes so that I could stack the col-* for mobile but display them vertically-aligned in the center for larger screens, e.g.
感谢@HashemQolami 的回答，我构建了一些可以像 col-* 类一样在移动设备上工作的媒体查询，这样我就可以为移动设备堆叠 col-*，但在更大屏幕的中心垂直对齐显示它们，例如
<div class='row row-sm-flex-center'>
<div class='col-xs-12 col-sm-6'></div>
<div class='col-xs-12 col-sm-6'></div>
</div>
.
.
.row-xs-flex-center {
display:flex;
align-items:center;
}
@media ( min-width:768px ) {
.row-sm-flex-center {
display:flex;
align-items:center;
}
}
@media ( min-width: 992px ) {
.row-md-flex-center {
display:flex;
align-items:center;
}
}
@media ( min-width: 1200px ) {
.row-lg-flex-center {
display:flex;
align-items:center;
}
}
More complicated layouts that require a different number of columns per screen resolution (e.g. 2 rows for -xs, 3 for -sm, and 4 for -md, etc.) would need some more advanced finagling, but for a simple page with -xs stacked and -sm and larger in rows, this works fine.
更复杂的布局需要每个屏幕分辨率不同的列数（例如 -xs 为 2 行，-sm 为 3 行，-md 为 4 行，等等）将需要一些更高级的调整，但对于带有 -xs 的简单页面堆叠和 -sm 和更大的行，这很好用。
回答by Manuszep
Following the accepted answer, if you do not wish to customize the markup, for separation of concerns or simply because you use a CMS, the following solution works fine:
按照接受的答案，如果您不希望自定义标记、关注点分离或仅仅因为您使用 CMS，则以下解决方案可以正常工作：
.valign {
font-size: 0;
}
.valign > [class*="col"] {
display: inline-block;
float: none;
font-size: 14px;
font-size: 1rem;
vertical-align: middle;
}<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row valign">
<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 limitation here is that you cannot inherit font size from the parent element because the row sets the font size to 0 in order to remove white space.
这里的限制是您不能从父元素继承字体大小，因为该行将字体大小设置为 0 以删除空格。
回答by user1477388
I prefer this method as per David Walsh Vertical center CSS:
根据David Walsh Vertical center CSS，我更喜欢这种方法：
.children{
position: relative;
top: 50%;
transform: translateY(-50%);
}
The transformisn't essential; it just finds the center a little more accurately. Internet Explorer 8 may be slightly less centered as a result, but it is still not bad - Can I use - Transforms 2d.
该transform不是必需的; 它只是更准确地找到中心。因此，Internet Explorer 8 的居中性可能会稍差一些，但它仍然不错 -我可以使用 - Transforms 2d。
回答by Edvard ?kerberg
This is my solution. Just add this class to your CSS content.
这是我的解决方案。只需将此类添加到您的 CSS 内容中即可。
.align-middle {
display: flex;
justify-content: center;
align-items: center;
}
Then your HTML would look like this:
那么您的 HTML 将如下所示：
<div class="col-xs-12 align-middle">
<div class="col-xs-6" style="background-color:blue;">
<h3>Item</h3>
<h3>Item</h3>
</div>
<div class="col-xs-6" style="background-color:red;">
<h3>Item</h3>
</div>
</div>
.align-middle {
display: flex;
justify-content: center;
align-items: center;
}<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<!DOCTYPE html>
<title>Title</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xs-12 align-middle">
<div class="col-xs-6" style="background-color:blue;">
<h3>Item</h3>
<h3>Item</h3>
</div>
<div class="col-xs-6" style="background-color:red;">
<h3>Item</h3>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</body>
</html>回答by Ryan Alexander
I just did this and it does what I want it to do.
我只是这样做了，它做了我想要它做的事情。
.align-middle {
margin-top: 25%;
margin-bottom: 25%;
}
And now my page looks like
现在我的页面看起来像
<div class='container-fluid align-middle'>
content
+--------------------------------+
| |
| +--------------------------+ |
| | | |
| | | |
| | | |
| | | |
| | | |
| +--------------------------+ |
| |
+--------------------------------+
