与 Bootstrap 3 垂直对齐
[英]vertical-align with 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来修复它，但我认为这对于响应式设计来说不是一个好的解决方案。
26 个解决方案
解决方案1
958 已采纳 2013-12-12 16:17:03
这个答案提出了一个技巧，但我强烈建议您使用 flexbox（如@Haschem 答案中所述），因为它现在在任何地方都得到支持。
演示链接：
-引导程序 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>
如果您在代码中留出真正的空间（例如...</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 已更新
解决方案2
914 2014-08-27 00:09:26
灵活的盒子布局
随着CSS 弹性盒的出现，许多网页设计师的噩梦1都得到了解决。 最棘手的问题之一，垂直对齐。 现在即使在未知的高度也是可能的。
“二十年的布局黑客即将结束。也许不是明天，但很快，并且在我们的余生中。”
— W3Conf 2013 上的CSS 传奇人物Eric Meyer
弹性盒（或简称 Flexbox）是一种新的布局系统，专为布局目的而设计。 规范规定：
Flex 布局表面上类似于块布局。 它缺少许多可用于块布局的更复杂的以文本或以文档为中心的属性，例如浮动和列。 作为回报，它获得了简单而强大的工具，用于以 web 应用程序和复杂网页经常需要的方式分配空间和对齐内容。
在这种情况下它如何提供帮助？ 走着瞧。
垂直对齐的列
使用 Twitter Bootstrap 我们有.row s 有一些.col-* s。 我们需要做的就是将所需的.row 2显示为一个flex 容器框，然后通过align-items属性垂直align-items它的所有flex item （列）。
示例在这里（请仔细阅读评论）
<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
Flex 项目可以在 flex 容器当前行的交叉轴上对齐，类似于
justify-content但在垂直方向上。align-items设置所有弹性容器align-items的默认对齐方式，包括匿名弹性项目。
大警报
重要说明 #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 */
}
输出
彩色区域显示列的填充框。
最后但并非最不重要的是，请注意此处的演示和代码片段旨在为您提供不同的想法，提供实现目标的现代方法。 如果您打算在现实世界的网站或应用程序中使用这种方法，请注意“大警报”部分。
对于包括浏览器支持在内的进一步阅读，这些资源将非常有用：
- Mozilla 开发者网络 - 灵活的盒子
- Flexbox 指南 - CSS 技巧
- HTML5Rocks - Flexbox 快速
- SmashingMagazine - 使用 Flexbox 居中元素
- Philip Walton - 由 Flexbox 解决
- 我可以使用：灵活的盒子布局模块
1. 将 div 内的图像垂直对齐具有响应高度2. 最好使用额外的类，以免改变 Twitter Bootstrap 的默认.row 。
解决方案3
49 2016-10-01 15:01:28
以下代码对我有用：
.vertical-align {
display: flex;
align-items: center;
}
解决方案4
48 2017-03-21 12:14:16
2020 年更新
我知道最初的问题是针对Bootstrap 3 的，但是现在Bootstrap 4已经发布，这里有一些关于垂直中心的更新指南。
重要的！ 垂直中心是相对于父级的高度
如果你试图中心元素的父一直没有明确的高度，没有垂直中心解决方案将工作！
引导程序 4
既然 Bootstrap 4默认是flexbox，有许多不同的垂直对齐方法可以使用： auto-margins 、 flexbox utils或显示 utils以及垂直对齐 utils 。 起初“垂直对齐实用程序”似乎很明显，但这些仅适用于内联和表格显示元素。 这里有一些 Bootstrap 4 垂直居中选项。
1 - 使用自动边距的垂直中心：
另一种垂直居中的方法是使用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>
my-auto表示垂直 y 轴上的边距，相当于：
margin-top: auto;
margin-bottom: auto;
2 - 带有 Flexbox 的垂直中心：
由于 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>
或者，在整个.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>
3 - 使用 Display Utils 的垂直居中：
自举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 - 使用 display utils Demo垂直居中
另请参阅： Bootstrap 4 中的垂直对齐中心
引导程序 3
项目容器上的 Flexbox 方法居中：
.display-flex-center {
display: flex;
align-items: center;
}
变换 translateY 方法：
.transform-center-parent {
position: relative;
transform-style: preserve-3d;
}
.transform-center {
position: relative;
top: 50%;
transform: translateY(-50%);
}
显示内联方法：
.display-inline-block {
display: inline;
}
.display-inline-block > div {
display: inline-block;
float: none;
vertical-align: middle;
}
解决方案5
28 2013-12-12 16:20:32
在 div 的 CSS 中试试这个：
display: table-cell;
vertical-align: middle;
解决方案6
23 2015-01-27 09:11:15
按照接受的答案，如果您不希望自定义标记、关注点分离或仅仅因为您使用 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>
这里的限制是您不能从父元素继承字体大小，因为该行将字体大小设置为 0 以删除空格。
解决方案7
22 2015-01-05 00:05:31
我想我会分享我的“解决方案”，以防它帮助任何不熟悉 @media 查询本身的人。
感谢@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;
}
}
更复杂的布局需要每个屏幕分辨率不同的列数（例如 -xs 为 2 行，-sm 为 3 行，-md 为 4 行，等等）将需要一些更高级的调整，但对于带有 -xs 的简单页面堆叠和 -sm 和更大的行，这很好用。
解决方案8
22 2015-02-14 19:21:56
根据David Walsh Vertical center CSS，我更喜欢这种方法：
.children{
position: relative;
top: 50%;
transform: translateY(-50%);
}
transform不是必需的； 它只是更准确地找到中心。 因此，Internet Explorer 8 的居中性可能会稍差一些，但它仍然不错 -我可以使用 - Transforms 2d 。
解决方案9
19 2018-05-02 12:10:54
这是我的解决方案。 只需将此类添加到您的 CSS 内容中即可。
.align-middle {
display: flex;
justify-content: center;
align-items: center;
}
那么您的 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>
解决方案10
16 2015-05-31 23:13:24
我只是这样做了，它做了我想要它做的事情。
.align-middle {
margin-top: 25%;
margin-bottom: 25%;
}
现在我的页面看起来像
<div class='container-fluid align-middle'>
content
+--------------------------------+
| |
| +--------------------------+ |
| | | |
| | | |
| | | |
| | | |
| | | |
| +--------------------------+ |
| |
+--------------------------------+
解决方案11
11 2014-07-12 19:57:25
我真的发现以下代码可以使用 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;
}
引导链接
您可能需要根据需要修改高度（特别是在.v-center ）并删除/更改div[class*='col-']上的div[class*='col-'] 。
解决方案12
8 2014-12-28 12:08:01
我遇到了同样的问题。 就我而言，我不知道外容器的高度，但我是这样修复它的：
首先设置html和body元素的高度，使其为 100%。 这个很重要！ 没有这个， html和body元素将简单地继承其子元素的高度。
html, body {
height: 100%;
}
然后我有一个外部容器类：
.container {
display: table;
width: 100%;
height: 100%; /* For at least Firefox */
min-height: 100%;
}
最后是带有类的内部容器：
.inner-container {
display: table-cell;
vertical-align: middle;
}
HTML 很简单：
<body>
<div class="container">
<div class="inner-container">
<p>Vertically Aligned</p>
</div>
</div>
</body>
这就是垂直对齐内容所需的全部内容。 在小提琴中检查一下：
提琴手
解决方案13
8 2016-03-02 07:21:05
不需要表格和表格单元格。 使用转换可以轻松实现。
示例： http : //codepen.io/arvind/pen/QNbwyM
代码：
.child { height: 10em; border: 1px solid green; position: relative; } .child-content { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> <div class="row parent"> <div class="col-xs-6 col-lg-6 child"> <div class="child-content"> <div style="height:4em;border:1px solid #000">Big</div> </div> </div> <div class="col-xs-6 col-lg-6 child"> <div class="child-content"> <div style="height:3em;border:1px solid #F00">Small</div> </div> </div> </div>
解决方案14
7 2015-09-23 18:33:29
如果您使用的是 Bootstrap 的Less版本，并且自己编译成 CSS，则可以使用一些实用程序类来与 Bootstrap 类一起使用。
我发现这些在我想要保留 Bootstrap 网格系统的响应性和可配置性的地方工作得非常好（比如使用-md或-sm ），但我希望给定行中的所有列都具有相同的垂直高度（这样我就可以垂直对齐它们的内容，并使行中的所有列共享一个公共中间）。
CSS/更少：
.display-table {
display: table;
width: 100%;
}
.col-md-table-cell {
@media (min-width: @screen-md-min) {
display: table-cell;
vertical-align: top;
float: none;
}
}
.col-sm-table-cell {
@media (min-width: @screen-sm-min) {
display: table-cell;
vertical-align: top;
float: none;
}
}
.vertical-align-middle {
vertical-align: middle;
}
HTML：
<div class="row display-table">
<div class="col-sm-5 col-sm-table-cell vertical-align-middle">
...
</div>
<div class="col-sm-5 col-sm-table-cell vertical-align-middle">
...
</div>
</div>
解决方案15
6 2016-06-09 17:41:48
我详细阐述了zessx 的答案，以便在不同屏幕尺寸上混合不同列尺寸时更容易使用。
如果您使用Sass ，您可以将其添加到您的 scss 文件中：
@mixin v-col($prefix, $min-width) {
@media (min-width: $min-width) {
.col-#{$prefix}-v {
display: inline-block;
vertical-align: middle;
float: none;
}
}
}
@include v-col(lg, $screen-lg);
@include v-col(md, $screen-md);
@include v-col(sm, $screen-sm);
@include v-col(xs, $screen-xs);
这将生成以下 CSS（如果您不使用 Sass，则可以直接在样式表中使用）：
@media (min-width: 1200px) {
.col-lg-v {
display: inline-block;
vertical-align: middle;
float: none;
}
}
@media (min-width: 992px) {
.col-md-v {
display: inline-block;
vertical-align: middle;
float: none;
}
}
@media (min-width: 768px) {
.col-sm-v {
display: inline-block;
vertical-align: middle;
float: none;
}
}
@media (min-width: 480px) {
.col-xs-v {
display: inline-block;
vertical-align: middle;
float: none;
}
}
现在您可以在响应式列上使用它，如下所示：
<div class="container">
<div class="row">
<div class="col-sm-7 col-sm-v col-xs-12">
<p>
This content is vertically aligned on tablets and larger. On mobile it will expand to screen width.
</p>
</div><div class="col-sm-5 col-sm-v col-xs-12">
<p>
This content is vertically aligned on tablets and larger. On mobile it will expand to screen width.
</p>
</div>
</div>
<div class="row">
<div class="col-md-7 col-md-v col-sm-12">
<p>
This content is vertically aligned on desktops and larger. On tablets and smaller it will expand to screen width.
</p>
</div><div class="col-md-5 col-md-v col-sm-12">
<p>
This content is vertically aligned on desktops and larger. On tablets and smaller it will expand to screen width.
</p>
</div>
</div>
</div>
解决方案16
5 2017-10-16 21:06:16
自 Bootstrap 4 以来，本机支持 Flex 行为。 row div 中添加d-flex align-items-center 。 您不再需要修改 CSS 内容。
简单示例： http : //jsfiddle.net/vgks6L74/
<!-- language: html -->
<div class="row d-flex align-items-center">
<div class="col-5 border border-dark" style="height:10em"> Big </div>
<div class="col-2 border border-danger" style="height:3em"> Small </div>
</div>
以你的例子： http : //jsfiddle.net/7zwtL702/
<!-- language: html -->
<div class="row d-flex align-items-center">
<div class="col-5">
<div class="border border-dark" style="height:10em">Big</div>
</div>
<div class="col-2">
<div class="border border-danger" style="height:3em">Small</div>
</div>
</div>
来源： Flex·Bootstrap
解决方案17
4 2015-05-28 16:05:44
好吧，不小心我混合了一些解决方案，它现在终于适用于我的布局，我试图用最小分辨率的 Bootstrap 列制作 3x3 表格。
/* Required styles */ #grid a { display: table; } #grid a div { display: table-cell; vertical-align: middle; float: none; } /* Additional styles for demo: */ body { padding: 20px; } a { height: 40px; border: 1px solid #444; } a > div { width: 100%; text-align: center; }
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> <div id="grid" class="clearfix row"> <a class="col-xs-4 align-center" href="#"> <div>1</div> </a> <a class="col-xs-4 align-center" href="#"> <div>2</div> </a> <a class="col-xs-4 align-center" href="#"> <div>3</div> </a> <a class="col-xs-4 align-center" href="#"> <div>4</div> </a> <a class="col-xs-4 align-center" href="#"> <div>5</div> </a> <a class="col-xs-4 align-center" href="#"> <div>6</div> </a> <a class="col-xs-4 align-center" href="#"> <div>7</div> </a> <a class="col-xs-4 align-center" href="#"> <div>8</div> </a> <a class="col-xs-4 align-center" href="#"> <div>9</div> </a> </div>
解决方案18
3 2020-07-14 01:05:03
对于最新版本的引导程序，您可以使用align-items-center 。 在 flexbox 容器上使用 align-items 实用程序来更改 flex 项目在交叉轴上的对齐方式（y 轴开始，x 轴如果 flex-direction: column）。 从开始、结束、居中、基线或拉伸（浏览器默认）中进行选择。
<div class="d-flex align-items-center">
...
</div>
解决方案19
2 2017-05-16 08:06:50
div{ border: 1px solid; } span{ display: flex; align-items: center; } .col-5{ width: 100px; height: 50px; float: left; background: red; } .col-7{ width: 200px; height: 24px; float: left; background: green; } <span> <div class="col-5"> </div> <div class="col-7"></div> </span>解决方案20
1 2017-06-25 05:40:39
有几种方法可以做到：
用
display: table-cell; vertical-align: middle;和容器的CSS
display: table;使用 padding 和 media-screen 来改变相对于屏幕尺寸的 padding。 谷歌@media 屏幕以了解更多信息。
使用相对填充
即，以 % 的形式指定填充
解决方案21
1 2017-10-09 12:25:32
尝试这个，
.exe { font-size: 0; } .exe > [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 exe"> <div class="col-xs-5"> <div style="height:5em;border:1px solid grey">Big</div> </div> <div class="col-xs-5"> <div style="height:3em;border:1px solid red">Small</div> </div> </div>
解决方案22
0 2017-03-20 14:46:05
使用 Bootstrap 4（目前处于 alpha 阶段），您可以使用.align-items-center类。 所以你可以保持 Bootstrap 的响应特性。 对我来说马上就很好用。 请参阅Bootstrap 4 文档。
解决方案23
0 2017-11-25 08:41:21
HTML
<div class="row">
<div class="col-xs-2 pull-bottom"
style="height:100px;background:blue">
</div>
<div class="col-xs-8 pull-bottom"
style="height:50px;background:yellow">
</div>
</div>
CSS
.pull-bottom {
display: inline-block;
vertical-align: bottom;
float: none;
}
解决方案24
0 2022-08-17 08:22:15
尝试这个
<div class="d-flex align-items-center">
...
</div>
解决方案25
-1 2020-10-10 01:46:36
我花了很多时间从这里尝试解决方案，但没有一个对我有帮助。 几个小时后，我相信这将允许您将 BS3 中的任何子元素居中。
CSS
.vertical-center {
display: flex;
flex-direction: column;
justify-content: center;
}
HTML
<div class="col-md-6 vertical-center">
<div class="container">
<div class="row">
</div>
</div>
</div>
解决方案26
-4 2014-08-13 17:40:08
我遇到了同样的情况，我想在一行中垂直对齐几个 div 元素，发现 Bootstrap 类 col-xx-xx 将样式应用于 div 为 float: left。
我必须在 div 元素上应用样式，例如 style="Float:none" 并且我所有的 div 元素开始垂直对齐。 这是工作示例：
<div class="col-lg-4" style="float:none;">
JsFiddle 链接
以防万一有人想阅读有关 float 属性的更多信息：
W3Schools - 浮动
Bootstrap 3垂直对齐
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.