与Bootstrap 3垂直alignment
我使用的是Twitter Bootstrap 3，当我想垂直alignment两个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来修复它，但是我觉得这不是一个很好的解决scheme。
这个答案提出了一个黑客，但我强烈build议你使用flexbox（如@Haschem答案中所述 ），因为它现在到处都支持（闭嘴I9）
演示链接：
– 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>
灵活的盒子布局
随着CSS Flexible Box的问世，很多网页devise师的噩梦1已经解决了。 其中一个最hacky，垂直alignment。 现在甚至可能在未知的高度 。
“二十年的布局黑客即将结束，也许不是明天，而是很快，而且是我们的余生。”
– 在W3Conf 2013的 CSS传奇Eric Meyer
柔性盒（或简称为Flexbox）是一种专为布局而devise的新版式系统。 规范规定 ：
Flex布局与块布局表面相似。 它缺less许多可以在块布局中使用的更复杂的以文本或文档为中心的属性，例如浮动和列。 作为回报，它可以获得简单而强大的工具来分发空间并以web应用程序和复杂的网页经常需要的方式alignment内容。
在这种情况下它有什么帮助？ 那么，让我们看看。
垂直alignment的列
使用Twitter Bootstrap，我们有一些.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; }
输出
彩色区域显示列的填充框。
明确align-items: center
8.3横轴alignment：
align-items属性柔性物品可以在柔性容器的当前线的横轴上alignment，类似于
justify-content但是在垂直方向上。align-items为所有flex容器的项目（包括匿名flex项目）设置默认alignment方式。
align-items: center;按中心值， 弹性项目的边距框在线内的交叉轴上居中。
大警报
重要说明＃1：除非您将.col-xs-#类别中的一个指定给列，否则Bootstrap不会指定特殊小型设备中列的width 。
因此，在这个特定的演示中，我使用了.col-xs-*类，以便在移动模式下正确显示列，因为它明确指定了列的width 。
但是也可以通过更改display: flex; closures 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; } }
在那种情况下，我会用凯文·尼尔森的方法 去做 。
重要说明＃2：由于简洁，省略了供应商前缀。 Flexbox语法在此期间已更改。 新的编写语法不适用于旧版本的Web浏览器（但不像Internet Explorer 9！Internet Explorer 10及更高版本支持Flexbox）。
这意味着您还应该在生产模式下使用供应商前缀的属性，如display: -webkit-box等。
如果你点击Demo中的“Toggle Compiled View” ，你会看到CSS声明的前缀版本（感谢Autoprefixer ）。
具有垂直alignment内容的全高列
正如你在前面的演示中看到的那样 ，列（flex项目）不再像它们的容器（flex容器盒，即.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开发者networking – 灵活的盒子
- Flexbox指南 – CSS技巧
- HTML5Rocks – 快速的Flexbox
- SmashingMagazine – 用Flexbox定位元素
- 菲利普·沃尔顿 – 由Flexbox解决
- 我可以使用：灵活的箱子布局模块
1. 将div内的图片与响应高度垂直alignment 2.最好使用额外的类，以便不改变Twitter Bootstrap的默认.row 。
试试这在div的CSS：
display: table-cell; vertical-align: middle;
遵循接受的答案，如果您不希望自定义标记，分离问题或仅仅因为您使用CMS，则以下解决scheme可以正常工作：
.valign { font-size: 0; } .valign > [class*="col"] { display: inline-block; float: none; font-size: 14px; font-size: 1rem; vertical-align: middle; }
<link href="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>
下面的代码为我工作：
.vertical-align { display: flex; align-items: center; }
我想我会分享我的“解决scheme”，以防止其他人不熟悉@media查询自己。
感谢@ HashemQolami的回答，我build立了一些媒体查询，这些查询可以像col- *类一样移动，这样我就可以将col- *堆叠起来用于移动，但是在大屏幕的中间显示它们垂直alignment，例如
<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; } }
更复杂的布局，每个屏幕分辨率需要不同数量的列（例如，2行用于-xs，3用于-sm，4用于-md等）需要一些更高级的finagling，但对于带-xs的简单页面堆叠和-sm和更大的行，这工作正常。
我更喜欢这个方法按照David Walsh垂直中心CSS ：
.children{ background: #ffdb4c; height: 300px; position: relative; top: 50%; transform: translateY(-50%); }
transform不是必需的; 它只是更准确地发现中心。 因此，Internet Explorer 8可能会稍微偏移一些，但它仍然不错 – 我可以使用 – 转换2d 。
我只是做了这个，它做我想做的事情。
.align-middle { margin-top: 25%; margin-bottom: 25%; }
现在我的页面看起来像
<div class='container-fluid align-middle'> content ---------------------------------- | | | -------------------------- | | | | | | | | | | | | | | | | | | | | | | -------------------------- | | | ----------------------------------
我真的发现下面的代码使用Chrome浏览器，而不是其他浏览器比当前select的答案：
.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链接
您可能需要修改高度（特别是.v-center ），并根据您的需要删除/更改div[class*='col-']上的div[class*='col-'] 。
我遇到了同样的问题。 在我的情况下，我不知道外部容器的高度，但这是我如何修复它：
首先为你的html和body元素设置高度，使它们为100％。 这个很重要！ 没有这个， html和body元素将简单地inheritance他们孩子的身高。
html, body { height: 100%; }
然后我有一个外部容器类与：
.container { display: table; width: 100%; height: 100%; /* For at least Firefox */ min-height: 100%; }
最后是带有class的内部容器：
.inner-container { display: table-cell; vertical-align: middle; }
HTML就像下面这样简单：
<body> <div class="container"> <div class="inner-container"> <p>Vertically Aligned</p> </div> </div> </body>
这是所有你需要垂直alignment的内容。 检查它在小提琴：
的jsfiddle
如果您使用的是较低版本的Bootstrap，并且自己编译为CSS，则可以使用一些实用程序类与Bootstrap类一起使用。
我发现这些工作非常好，我希望保留Bootstrap网格系统的响应性和可configuration性（就像使用-md或-sm ），但我希望给定行中的所有列都具有相同的垂直高度（这样我就可以垂直alignment它们的内容，并使行中的所有列共享一个共同的中间）。
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>
2017年更新
我知道最初的问题是Bootstrap 3，但现在Bootstrap 4在alpha中，这里是一些关于垂直中心的更新指导。
Bootstrap 4
现在， 默认情况下 BS4，Alpha 6是flexbox，有许多不同的垂直alignment方法： 自动边距 ， flexbox utils ，或者显示器utils以及vertical alignment utils 。 起初“垂直alignment应用程序”似乎是显而易见的，但这些只适用于内联和表格显示元素。 这里有一些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垂直居中alignment行中的所有列。
<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 – 垂直中心使用显示器Utils：
引导程序4具有可用于显示的显示实用程序display:table ， display:table-cell ， display:inline等。这些可以与垂直alignment应用程序一起使用，以alignment内联，内嵌块或表格单元格元素。
<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>
使用Display Utils Demo的垂直中心
我在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>
不需要表和表格单元格。 它可以通过变换轻松实现。 例如： 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="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>
好吧，我不小心混合了一些解决scheme，现在终于适用于我的布局，我尝试使用最小分辨率的Bootstrap列制作3×3表格。
/* 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="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>
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>
有几种方法可以做到这一点
1。
display: table-cell; vertical-align: middle;
和容器的CSS来
display:table;
-
使用填充与媒体屏幕相对于屏幕大小更改填充。 谷歌@media屏幕了解更多
-
使用相对填充，即指定填充％
希望它有帮助
使用Bootstrap 4（目前在alpha中），你可以使用.align-items-center类。 所以你可以保持Bootstrap的响应特性。 为我而努力。 请参阅Bootstrap 4文档 。
尝试这个，
.exe { font-size: 0; } .exe > [class*="col"] { display: inline-block; float: none; font-size: 14px; font-size: 1rem; vertical-align: middle; }
<link href="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>
自从Bootstrap以来，Flex行为本身就被支持了4. 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>
来源： https ： //getbootstrap.com/docs/4.0/utilities/flex/
我遇到了同样的情况，我想在一行中垂直alignment几个div元素，发现Bootstrap类col-xx-xx将style作为float：left应用于div。
我不得不应用风格的div元素，如style =“Float：none”，所有我的div元素开始垂直alignment。 这是一个工作的例子：
<div class="col-lg-4" style="float:none;">
JsFiddle链接
以防万一有人想了解更多关于浮动资产的信息：
