与Bootstrap 3垂直对齐

Question

我正在使用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它来修复它,但我认为这对于响应式设计来说不是一个好的解决方案.

Answer 1

这个答案提出了一个黑客,但我强烈建议你使用flexbox(如@Haschem答案中所述),因为它现在在任何地方都受到支持.

演示链接:
- 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>

Bootply

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>

在这里,我们在<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已更新

Answer 2

灵活的盒子布局

随着CSS Flexible Box的出现,许多网页设计师的噩梦¹已经得到解决.最hacky之一,垂直对齐.现在即使在未知的高度也是可能的.

"二十年的布局黑客即将结束.也许不是明天,但很快,以及我们的余生."

- CSS传奇埃里克·迈耶在W3Conf 2013

Flexible Box(或简称Flexbox)是一种专为布局目的而设计的新布局系统.该规范规定:

Flex布局在表面上类似于块布局.它缺少许多可用于块布局的更复杂的以文本或文档为中心的属性,例如浮点数和列.作为回报,它获得了简单而强大的工具,用于分配空间并以Web应用程序和复杂网页通常需要的方式对齐内容.

在这种情况下,它如何帮助？好的,我们等着瞧.

垂直对齐的列

使用Twitter Bootstrap我们有.row一些.col-*s.我们需要做的就是将所需的.row²显示为弹性容器盒,然后按属性垂直对齐其所有弹性项目(列)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交叉轴对齐:align-items属性

柔性物品可以在柔性容器的当前线的交叉轴上对齐,类似于justify-content但是在垂直方向上.align-items设置所有Flex容器项的默认对齐方式,包括匿名弹性项.

align-items: center; 按中心值,弹性项目的边距框位于线条内的横轴中心.

大警报

重要提示#1:width除非您为.col-xs-#列提供其中一个类,否则Twitter Bootstrap不会指定超小型设备中的列.

因此,在这个特定的演示中,我使用了.col-xs-*类来使列在移动模式下正确显示,因为它明确指定width了列的列.

但是,您也可以通过更改为特定的屏幕尺寸来关闭 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).

具有垂直对齐内容的全高柱

正如您在上一个演示中看到的那样,列(flex项)不再像它们的容器那样高(flex容器盒.即.row元素).

这是因为使用center了align-items属性值.默认值是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.}

Answer 3

以下代码对我有用:

.vertical-align {
    display: flex;
    align-items: center;
}

Answer 4

更新2018年

我知道最初的问题是针对Bootstrap 3,但是现在已经发布了Bootstrap 4,这里有一些关于垂直中心的更新指南.

重要! 垂直中心相对于父级的高度

如果你试图中心元素的父一直没有明确的 高度,没有垂直居中的解决方案将工作!

Bootstrap 4

现在BS4是flexbox,默认情况下有许多不同的垂直对齐方法:自动边距,flexbox utils,或display utils以及vertical align utils.起初,"vertical align 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>

BS4 - 使用自动边距演示的垂直中心

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>

或者,使用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>

BS4 - 垂直中心不同高度列演示

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>

BS4 - 使用display utils 演示的垂直中心

另见: Bootstrap中的垂直对齐中心4

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

Bootstrap 3定心方法的演示

Answer 5

在div的CSS中尝试这个:

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

Answer 6

我想我会分享我的"解决方案",以防它帮助其他不熟悉@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等)需要更高级的finagling,但对于带-xs的简单页面堆叠和-sm和更大的行,这工作正常.

Answer 7

根据接受的答案,如果您不希望自定义标记,分离关注点或仅仅因为您使用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以删除空格.

Answer 8

我更喜欢这种方法,根据David Walsh Vertical center CSS:

.children{
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

这transform不是必要的; 它只是更准确地找到中心.因此,Internet Explorer 8可能会稍微不那么集中,但它仍然不错 - 我可以使用 - 转换2d.

Answer 9

这是我的解决方案.只需将此类添加到您的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>

Answer 10

我刚刚做了这个,它做了我想做的事.

.align-middle {
  margin-top: 25%;
  margin-bottom: 25%;
}

现在我的页面看起来像

<div class='container-fluid align-middle'>
    content

 +--------------------------------+
 |                                |
 |  +--------------------------+  |
 |  |                          |  |
 |  |                          |  |
 |  |                          |  |
 |  |                          |  |
 |  |                          |  |
 |  +--------------------------+  |
 |                                |
 +--------------------------------+

Answer 11

我真的发现以下代码使用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链接

您可能需要修改高度(特别是在.v-center)并删除/更改div以div[class*='col-']满足您的需求.

Answer 12

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

首先设置您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>

这就是垂直对齐内容所需的全部内容.在小提琴中查看:

的jsfiddle

Answer 13

如果您使用的是Less版本的Bootstrap,并且自己编译成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>

Answer 14

不需要桌子和桌子.使用变换可以轻松实现.示例: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>

Answer 15

我详细阐述了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>

Answer 16

自 Bootstrap 4 以来，本机支持 Flex 行为。d-flex align-items-center在rowdiv 中添加。您不再需要修改 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