提问



我正在使用Twitter Bootstrap 3,当我想垂直对齐两个div时遇到问题,例如 - JSFiddle链接:[105]




<!-- 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>




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






  演示链接:

   - Bootstrap 3

   - Bootstrap 4 alpha 6
[107] [108]



您仍然可以在需要时使用自定义类:




.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的出现,许多网页设计师梦魇 1 已经得到解决。其中最笨拙的是垂直对齐。现在甚至可以在未知高度.[109]



  二十年的布局黑客即将结束。也许不是明天,
  但很快,在我们的余生中。

  
   - CSS传奇Eric Meyer参加W3Conf 2013 [110] [111]



Flexible Box(或简称Flexbox)是一种专为布局目的而设计的新布局系统。规范说明:[112]



  Flex布局在表面上类似于块布局。它缺乏很多
  可以使用的更复杂的以文本或文档为中心的属性
  在块布局中,例如浮点数和列。作为回报,它变得简单
  和强大的工具,用于分配空间和对齐内容
  Webapps和复杂的网页经常需要。



在这种情况下,它如何帮助?好吧,走着瞧。





垂直对齐列



使用Twitter Bootstrap我们.row有一些.col-* s。我们需要做的就是将所需的.row 2 显示为弹性容器盒,然后通过align-items属性垂直对齐其所有弹性项目(列)。[113] [114] [115]


示例 (请仔细阅读评论) [116]


<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属性 [117]

  
  Flex项目可以在Flex容器的当前行的交叉轴上对齐,类似于justify-content但是在垂直方向上。 align-items设置所有Flex容器项目的默认对齐方式,包括匿名弹性项目。[118] [119] [120] [121] [122]

  
  align-items: center;
  按中心值,弹性项目的边距框位于直线内的横轴中心。[123] [124]






大警报



重要提示#1:除非您将.col-xs-#类之一添加到列中,否则Twitter Bootstrap不会指定超小型设备中的width列。


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


但是,您也可以通过在特定屏幕尺寸中将display: flex;更改为display: block;关闭 Flexbox布局。例如:


/* Extra small devices (767px and down) */
@media (max-width: 767px) {
    .row.vertical-align {
        display: block; /* Turn off the flexible box layout */
    }
}


或者您可以在特定屏幕尺寸上指定.vertical-align ,如下所示:[125]


/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) {
    .row.vertical-align {
        display: flex;
        align-items: center;
    }
}


在那种情况下,我会采用@KevinNelson的方法。


重要提示#2:由于简洁,省略了供应商前缀。 Flexbox语法在此期间已更改。新的书面语法不适用于旧版本的网络浏览器(但不像互联网那样老了!资源管理器  9!Internet上的Explorer  10及更高版本支持Flexbox)。


这意味着您还应该在生产模式中使用display: -webkit-box之类的供应商前缀属性等。


如果您在演示中单击Toggle Compiled View,您将看到CSS声明的前缀版本(感谢Autoprefixer)。[128] [129]





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



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


这是因为对align-items属性使用center值。默认值为stretch,以便项目可以填充父元素的整个高度。


为了解决这个问题,您还可以将display: flex;添加到列中:


示例 (同样,请注意评论) [131]


.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 [132] [133] [134] [135] [[[136] [137]

最佳参考


以下代码对我有用:


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

其它参考1


在div的CSS中尝试这个:


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

其它参考2


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



我想我会分享我的解决方案,以防它帮助其他不熟悉@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和更大的行,这工作正常。

其它参考3


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


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


transform并不重要;它只是更准确地找到中心。互联网 资源管理器  8可能会稍微不那么集中,但它仍然不错 - 我可以使用 - 变换2D [140]

其它参考4


我刚刚做了这件事,它做了我想做的事。


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


现在我的页面看起来像


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

 ----------------------------------
 |                                |
 |   --------------------------   |
 |  |                          |  |
 |  |                          |  |
 |  |                          |  |
 |  |                          |  |
 |  |                          |  |
 |   --------------------------   |
 |                                |
 ----------------------------------

其它参考5


更新2018年


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


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



  如果您尝试居中的元素的父级没有定义
  垂直居中解决方案的高度,无将起作用!



Bootstrap 4



现在BS4默认 flexbox ,有许多不同的垂直对齐方法:自动边距,flexbox utils,或display utils以及vertical align utils。起初,vertical align utils似乎很明显,但这些仅可以使用内联和表格显示元素。以下是一些Bootstrap 4垂直居中选项.. [141] [142] [143] [144]





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 - 使用自动边距的垂直中心演示 [145]


my-auto表示垂直y轴上的边距,相当于:


margin-top: auto;
margin-bottom: auto;





2 - 使用Flexbox的垂直中心:


[146]


由于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垂直居中对齐行中的所有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 - 垂直中心不同高度列演示 [147]





3 - 垂直中心使用Display Utils:


Bootstrap 4具有可用于display:tabledisplay:table-celldisplay:inline等的显示工具。这些可以与垂直对齐工具一起使用,以对齐内联,内联块或表格单元格元件。[148] [149]


<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 演示 [150]的垂直中心


另见:
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定心方法演示[152]

其它参考6


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



您可能需要修改高度(特别是.v-center)并根据需要删除/更改div[class*='col-']上的div。[153]

其它参考7


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


首先设置htmlbody元素的高度,使它们为100%。这个很重要!如果没有这个,htmlbody元素将简单地继承他们子的身高。


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


其它参考8


如果你使用的是Less版本的Bootstrap,并自己编译成CSS,你可以使用一些实用程序类来与Bootstrap类一起使用。[154] [155]


我发现这些工作非常好,我想保留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>

其它参考9


不需要桌子和桌子。使用变换可以轻松实现。
示例:http://codepen.io/arvind/pen/QNbwyM [156]


码:




.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>



我详细阐述了zessx的答案,以便在不同的屏幕尺寸上混合不同的列尺寸时更容易使用。


如果您使用Sass,可以将其添加到您的scss文件中:[158]


@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>

其它参考10


好吧,不小心我已经混合了一些解决方案,它最终适用于我的布局,我试图用最小分辨率的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>





    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>



自Bootstrap 4以来,本机支持Flex行为。在row div中添加d-flex align-items-center。您不再需要修改您的CSS。


简单的例子:http://jsfiddle.net/vgks6L74/[159]


<!-- 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/[160]


<!-- 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/[161]

其它参考11


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



有几种方法可以做到这一点


1。


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


以及容器的css


display:table;



  1. 使用填充和媒体屏幕相对于屏幕大小更改填充。
    谷歌@media屏幕了解更多

  2. 使用相对填充
    即以%表示填充



希望能帮助到你

其它参考12


尝试这个,




.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>



使用Bootstrap 4(当前为alpha),您可以使用.align-items-center类。所以你可以保持Bootstrap的响应特性。
工作对我来说很好。参见Bootstrap 4文档。[162]

其它参考13


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

其它参考14


我遇到了同样的情况,我希望在一行中垂直对齐几个div元素,并发现Bootstrap类col-xx-xx将样式应用于div作为float:left。


我必须在div元素上应用样式,如style =Float:none,并且所有div元素都垂直对齐。这是工作示例:


<div class="col-lg-4" style="float:none;">


JsFiddle Link



以防万一有人想了解更多关于浮动属性:[163]


[164] W3Schools - Float