与Bootstrap 3垂直对齐

时间：2013-12-12 15:43:24

标签： html css css3 twitter-bootstrap twitter-bootstrap-3

我正在使用Twitter Bootstrap 3，当我想垂直对齐两个div时遇到问题，例如 - JSFiddle link：

<!-- 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来修复它，但我认为这不是响应式设计的好解决方案。

25 个答案:

答案 0 :(得分：900)

  

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

  

演示链接：
   - 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个空格）。所以...

Enter image description here

让我们踢出这个额外的空间!! 

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

Enter image description here

请注意看似无用的评论<!-- ... -->？它们重要 - 没有它们，<div>元素之间的空格将占用布局中的空间，打破网格系统。

注意：Bootply已更新

答案 1 :(得分：864)

灵活的盒子布局

随着CSS Flexible Box的出现，许多网页设计师的噩梦 1 已经解决。最hacky之一，垂直对齐。现在甚至可以在未知高度。

  

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

     

- Eric Meyer

上的CSS传奇W3Conf 2013

Flexible Box（或简称Flexbox）是一种专为布局目的而设计的新布局系统。 specification states：

  

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

在这种情况下如何帮助？好吧，让我们看看。

垂直对齐列

使用Twitter Bootstrap我们.row有一些.col-* s。我们需要做的就是将所需的.row 2 显示为flex container框，然后将所有flex item s（列）垂直对齐{{ 3}}属性。

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

输出

Vertical aligned columns in Twitter Bootstrap

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

澄清align-items: center

  

<强> EXAMPLE HERE

     

8.3 Cross-axis Alignment: the align-items property可以在flex容器的当前行的Flex items中对齐，类似于cross axis但在垂直方向上。 justify-content设置所有Flex容器项的默认对齐方式，包括匿名align-items。

     

align-items: center;   按中心值，flex items的边距框位于该行内flex item的居中位置。

大警报

重要提示＃1：除非您向列中提供width个类之一，否则Twitter引导程序不会在超小型设备中指定.col-xs-#列。

因此，在此特定演示中，我使用了.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 */
    }
}

或者你可以cross axis这样：

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

在这种情况下，我会选择specify .vertical-align only on specific screen sizes的@KevinNelson。

重要提示＃2：由于简洁，省略了供应商前缀。 Flexbox语法在此期间已更改。新的书面语法不适用于旧版本的Web浏览器（但不像Internet Explorer 9那样旧！Internet Explorer 10及更高版本支持Flexbox。）

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

如果您点击approach中的“切换编译视图”，您将看到CSS声明的前缀版本（感谢Demo）。

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

正如您在Autoprefixer中看到的那样，列（弹性项目）不再像其容器一样高（弹性容器框，即.row元素）。

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

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

previous demo （同样，请注意评论） 

.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  */
}

输出

Full-height columns with vertical aligned contents in Twitter Bootstrap

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

最后，但并非最不重要，请注意，此处的演示和代码段旨在为您提供不同的想法，以提供实现目标的现代方法。如果您打算在现实世界的网站或应用程序中使用此方法，请注意“ Big Alert ”部分。

如需进一步阅读，包括浏览器支持，这些资源将非常有用：

1。 Can I Use: Flexible Box Layout Module 2。为了不改变Twitter Bootstrap的默认.row，最好使用额外的类。

答案 2 :(得分：39)

以下代码对我有用：

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

答案 3 :(得分：25)

在div的CSS中尝试这个：

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

答案 4 :(得分：22)

更新2018年

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

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

  

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

Bootstrap 4

现在Bootstrap 4默认 flexbox 有很多不同的垂直对齐方法：auto-margins，flexbox utils或display utils以及{ {3}}。起初＆＃34; vertical align utils＆＃34;看起来很明显，但这些仅可以使用内联和表格显示元素。这里有一些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>

vertical align utils

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

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

2 - 使用Flexbox的垂直中心：

Bootstrap 4 - Vertical center using auto-margins Demo

由于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>

Vertical center grid columns

3 - 垂直中心使用Display Utils：

Bootstrap 4有Bootstrap 4 - Vertical center different height columns Demo，可用于display:table，display:table-cell，display:inline等。这些可以与display 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>

vertical alignment utils

另见： Bootstrap 4 - Vertical center using display utils Demo

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

Vertical Align Center in Bootstrap 4

答案 5 :(得分：21)

根据接受的答案，如果您不想自定义标记，分离关注点或仅仅因为您使用CMS，以下解决方案可以正常工作：

＆＃13;
＆＃13; 
.valign {
  font-size: 0;
}

.valign > [class*="col"] {
  display: inline-block;
  float: none;
  font-size: 14px;
  font-size: 1rem;
  vertical-align: middle;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

此处的限制是您不能从父元素继承字体大小，因为该行将字体大小设置为0以删除空格。

答案 6 :(得分：20)

我以为我会分享我的解决方案＆＃34;以防其他人不熟悉@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以及更大的行，这很好。

答案 7 :(得分：20)

我更喜欢这种方法，因为David Walsh Vertical center CSS：

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

transform不是必需的;它只是更准确地找到中心。因此，Internet Explorer 8可能会稍微不那么集中，但仍然不错 - Can I use - Transforms 2d 。

答案 8 :(得分：14)

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

答案 9 :(得分：13)

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

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

现在我的页面看起来像

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

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

答案 10 :(得分：10)

我确实发现以下代码可以使用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。

答案 11 :(得分：8)

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

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

答案 12 :(得分：7)

不需要表格和表格单元格。使用transform可以轻松实现。

示例：http://codepen.io/arvind/pen/QNbwyM

代码：

＆＃13;
＆＃13; 
.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%);
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 13 :(得分：7)

如果您使用的是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>

答案 14 :(得分：6)

我在zessx's answer上详细说明了一下，以便在不同的屏幕尺寸上混合不同的列尺寸时更容易使用。

如果您使用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>

答案 15 :(得分：4)

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

答案 16 :(得分：3)

好的，我不小心混合了一些解决方案，现在它终于适用于我的布局，我试图用最小分辨率制作一个带有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;
}

答案 17 :(得分：2)

＆＃13;
＆＃13; 
      ImageLoader.getInstance().loadImage(pack.getCoverImageUrl(), new SimpleImageLoadingListener(){
        @Override
        public void onLoadingStarted(String imageUri, View view) {
            super.onLoadingStarted(imageUri, view);
        }

        @Override
        public void onLoadingFailed(String imageUri, View view, FailReason failReason) {
            super.onLoadingFailed(imageUri, view, failReason);
        }

        @Override
        public void onLoadingComplete(String imageUri, View view, Bitmap loadedImage) {
            super.onLoadingComplete(imageUri, view, loadedImage);
            rl_header_main.setBackgroundDrawable(new BitmapDrawable(loadedImage));
            rl_header_main.setAlpha();
        }

        @Override
        public void onLoadingCancelled(String imageUri, View view) {
            super.onLoadingCancelled(imageUri, view);
        }
    });
＆＃13; 
    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;
    }
＆＃13;
＆＃13;
＆＃13;

答案 18 :(得分：2)

对于最新版本的引导程序，您可以使用align-items-center。在flexbox容器上使用align-items实用程序可更改弹性项目在横轴上的对齐方式（y轴开始，x轴（如果flex-direction：列））。从开始，结束，居中，基线或拉伸中选择（浏览器默认）。

<div class="d-flex align-items-center">
    ...
</div>

答案 19 :(得分：1)

有几种方法可以做到：

  1. 使用

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

    和容器的CSS 

    display: table;

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

  3. 使用相对填充

    即，用％

    4. 指定填充

答案 20 :(得分：1)

试试这个，

＆＃13;
＆＃13; 
.exe {
  font-size: 0;
}

.exe > [class*="col"] {
  display: inline-block;
  float: none;
  font-size: 14px;
  font-size: 1rem;
  vertical-align: middle;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 21 :(得分：0)

使用Bootstrap 4（当前为alpha），您可以使用.align-items-center类。所以你可以保持Bootstrap的响应特性。 工作对我来说很好。请参阅Bootstrap 4 Documentation。

答案 22 :(得分：0)

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

答案 23 :(得分：-1)

我花了很多时间从这里尝试解决方案，但没有一个对我有帮助。几个小时后，我相信这将允许您居中对齐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>

答案 24 :(得分：-3)

我遇到了同样的情况，我想在一行中垂直对齐几个div元素，发现Bootstrap类col-xx-xx将样式应用于div：float：left。

我必须在div元素上应用样式，如style =“Float：none”，并且所有div元素都开始垂直对齐。以下是工作示例：

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

JsFiddle Link

以防有人想要阅读有关浮动属性的更多信息：

W3Schools - Float

相关问题
最新问题