与Bootstrap 3垂直对齐

html HTML

阿飞小卤蛋达蒙

2020-03-15

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

第1638篇《与Bootstrap 3垂直对齐》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共19个回答
神无Davaid 2020.03.15

I ran into the same situation where I wanted to align a few div elements vertically in a row and found that Bootstrap classes col-xx-xx applies style to the div as float: left.

I had to apply the style on the div elements like style="Float:none" and all my div elements started vertically aligned. Here is the working example:

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

JsFiddle Link

Just in case someone wants to read more about the float property:

W3Schools - Float

泡芙Gil 2020.03.15

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;
}
Tony猪猪 2020.03.15

With Bootstrap 4 (which is in alpha currently) you can use the .align-items-center class. So you can keep the responsive character of Bootstrap. Workes straight away fine for me. See Bootstrap 4 Documentation.

逆天DavaidLEY 2020.03.15

有几种方法可以做到：

  1. 采用 

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

    和容器的CSS

    display: table;

  2. 将填充与媒体屏幕一起使用，以相对于屏幕尺寸更改填充。Google @media屏幕了解更多信息。

  3. 使用相对填充

    即，以百分比指定填充

老丝泡芙Pro 2020.03.15

尝试这个，

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

JimLEYHarry 2020.03.15 

    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>

Green留姬 2020.03.15

好的，我偶然混合了一些解决方案，现在终于可以在我的布局中使用了，在该布局中，我尝试使用最小分辨率的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>

伽罗JinJin小宇宙 2020.03.15

自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

村村小卤蛋 2020.03.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>
老丝神奇 2020.03.15

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

示例：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>

Green小小 2020.03.15

如果您正在使用Bootstrap 的Less版本并自己编译成CSS，则可以使用一些实用程序类与Bootstrap类一起使用。

我发现它们在要保持Bootstrap网格系统的响应性和可配置性（如使用-md或-sm）的情况下效果很好，但是我希望给定行中的所有列都具有相同的垂直高度（以便然后垂直对齐其内容，并使行中的所有列共享同一中间）。

CSS / Less：

.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>
十三斯丁Jim 2020.03.15

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

首先，将html和的高度设置为body100％。这个很重要！没有这些，htmland 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>

这就是垂直对齐内容所需的全部。在小提琴中检查一下：

杰斯菲德尔

梅Tony 2020.03.15

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

路易Harry 2020.03.15

按照您接受的答案，如果您不想自定义标记，为了关注点分离或仅仅因为使用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以便删除空格。

乐米亚 2020.03.15

我喜欢按照David Walsh Vertical center CSS的方法：

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

这transform不是必需的；它只会更准确地找到中心。因此，Internet Explorer 8的居中位置可能会稍差一些，但仍然不错- 我可以使用-Transforms 2d。

null 2020.03.15

在div的CSS中尝试以下操作：

display: table-cell;
vertical-align: middle;
神奇樱Eva 2020.03.15

下面的代码为我工作：

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

更新2020

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

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

如果您试图居中的元素的父元素没有定义的高度，那么任何垂直居中解决方案都将无效 ！

引导程序4

现在，默认情况下，Bootstrap 4是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>

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

my-auto represents margins on the vertical y-axis and is equivalent to:

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

2 - Vertical Center with Flexbox:

垂直中心网格列

Since Bootstrap 4 .row is now display:flex you can simply use align-self-center on any column to vertically center it...

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

or, use align-items-center on the entire .row to vertically center align all col-* in the row...

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

Bootstrap 4 - Vertical center different height columns Demo

3 - Vertical Center Using Display Utils:

Bootstrap 4 has display utils that can be used for display:table, display:table-cell, display:inline, etc.. These can be used with the vertical alignment utils to align inline, inline-block or table cell elements.

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

Bootstrap 4 - Vertical center using display utils Demo

另请参见： Bootstrap 4中的垂直对齐中心

引导程序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居中方法演示

神奇猴子 2020.03.15

这个答案是一个hack，但是我强烈建议您使用flexbox（如@Haschem answer中所述），因为它现在在任何地方都受支持。

演示链路：
- 引导3
- 自举4素α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>

自举

inline-block如果您在代码中保留实际空间（例如...</div> </div>...），则using 在块之间添加了额外的空间。如果列大小总计为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已更新

相似问题

0 回答

0 回答

5 回答

25 回答

0 回答

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android