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

输出

Twitter Bootstrap中的垂直对齐列

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

明确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 */ } 

输出

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

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

最后但并非最不重要的一点 ,请注意,这里的演示和代码片段是为了给你一个不同的想法,提供一个现代化的方法来实现目标。 如果您要在真实世界的网站或应用程序中使用此方法,请介意“ 大提示 ”部分。


为了进一步阅读,包括浏览器支持,这些资源将是有用的:

  • 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-']

我遇到了同样的问题。 在我的情况下,我不知道外部容器的高度,但这是我如何修复它:

首先为你的htmlbody元素设置高度,使它们为100%。 这个很重要! 没有这个, htmlbody元素将简单地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:tabledisplay:table-celldisplay: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; 
  1. 使用填充与媒体屏幕相对于屏幕大小更改填充。 谷歌@media屏幕了解更多

  2. 使用相对填充,即指定填充%

希望它有帮助

使用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链接

以防万一有人想了解更多关于浮动资产的信息:

W3Schools – 浮动