关于html：与Bootstrap 3垂直对齐


vertical-align with Bootstrap 3

我正在使用Twitter引导程序3，当我想垂直对齐两个div时，我遇到了一些问题，例如-jfiddle link:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!-- 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">

 
    Big
 
 
    Small

引导程序中的网格系统使用float: left，而不是display:inline-block，因此属性vertical-align不起作用。我试着用margin-top来修复它，但我认为这对于响应式设计来说不是一个好的解决方案。

相关讨论

This answer presents a hack, but I would highly recommend you to use flexbox (as stated in @Haschem answer), since it's now supported everywhere.

号

Demos link:
- Bootstrap 3
- Bootstrap 4 alpha 6

号

当需要自定义类时，您仍然可以使用它：

1
2
3
4
5
.vcenter {
    display: inline-block;
    vertical-align: middle;
    float: none;
}
1
2
3
4
        Big
    <!--
    -->
        Small

号

靴子

使用inline-block会增加块之间的额外空间，如果代码中有实际空间(如... ...)。如果列大小加起来等于12，那么这个额外的空间将破坏网格：

1
2
3
4
        Big
   
   
        Small

这里，在和之间有额外的空间(回车和2个制表符/8个空格)。所以…

Enter image description here。

让我们踢这个额外的空间！！

1
2
3
4
        Big
    <!--
    -->
        Small

。

氧化镁

注意到那些看似无用的评论了吗？它们很重要——没有它们，元素之间的空白将占用布局中的空间，从而破坏网格系统。

注意：引导程序已更新

相关讨论

灵活的方框布局

随着CSS flexible box的出现，许多网页设计师的噩梦1都得到了解决。其中一个最粗糙的，垂直对齐。现在即使在未知的高度也有可能。

"Two decades of layout hacks are coming to an end. Maybe not tomorrow,
but soon, and for the rest of our lives."

— CSS Legendary Eric Meyer at W3Conf 2013

号

flexible box(简称flexbox)是一种专门为布局目的而设计的新布局系统。规范规定：

Flex layout is superficially similar to block layout. It lacks many of
the more complex text- or document-centric properties that can be used
in block layout, such as floats and columns. In return it gains simple
and powerful tools for distributing space and aligning content in ways
that webapps and complex web pages often need.

号

在这种情况下它有什么帮助？好吧，让我们看看。

垂直对齐的列

使用Twitter引导程序，我们让.row有一些.col-*。我们需要做的就是将所需的.row2显示为一个灵活容器框，然后通过align-items属性垂直对齐其所有灵活项(列)。

示例(请仔细阅读评论)

1
2
3
4
     <!--
                    ^--  Additional class -->
         ...
         ...
1
2
3
4
.vertical-align {
    display: flex;
    align-items: center;
}

号输出

Vertical aligned columns in Twitter Bootstrap。

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

对align-items: center的澄清

8.3 Cross-axis Alignment: the align-items property

Flex items can be aligned in the cross axis of the current line of the flex container, similar to justify-content but in the perpendicular direction. align-items sets the default alignment for all of the flex container’s items, including anonymous flex items.

align-items: center;
By center value, the flex item’s margin box is centered in the cross axis within the line.

号大警报

重要注意事项1:twitter引导程序不会在超小型设备中指定列的width，除非您为这些列提供.col-xs-#类中的一个。

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

但是，您也可以通过将特定屏幕尺寸的display: flex;更改为display: block;来关闭flexbox布局。例如：

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

或者，您可以只在特定的屏幕大小上指定.vertical-align，如：

1
2
3
4
5
6
7
/* 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等。

如果在演示中单击"切换编译视图"，您将看到带前缀的CSS声明版本(多亏了autoprefixer)。

内容垂直对齐的全高列

正如您在上一个演示中看到的，列(flex项)不再像其容器(flex容器框)那么高。即.row元素)。

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

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

这里的例子(同样，注意注释)

1
2
3
4
5
6
7
8
9
10
11
12
.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快速
  • 粉碎库-带flexbox的定心元件
  • Philip Walton-由FlexBox解决
  • 我可以使用：灵活的盒子布局模块

1。将DIV中的图像与响应高度垂直对齐2。最好使用一个额外的类，以免改变twitter引导程序的默认.row。

相关讨论

以下代码适用于我：

1
2
3
4
.vertical-align {
    display: flex;
    align-items: center;
}
相关讨论

在DIV的CSS中尝试此操作：

1
2
display: table-cell;
vertical-align: middle;
相关讨论

2018年更新

我知道最初的问题是关于bootstrap 3的，但是现在bootstrap 4已经发布了，下面是一些关于垂直中心的更新指南。

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

If the parent of the element your trying to center has no defined
height, none of the vertical centering solutions will work!

号引导4

现在引导4默认为flexbox，有许多不同的垂直对齐方法：自动页边距、flexbox实用程序或显示实用程序以及垂直对齐实用程序。起初，"垂直对齐实用程序"似乎很明显，但这些只适用于内联和表显示元素。以下是一些引导4垂直居中选项。

1-使用自动页边距的垂直居中：

另一种垂直居中的方法是使用my-auto。这将使元素在其容器中居中。例如，h-100使行全高，my-auto将使col-sm-12列垂直居中。

1
        Card

引导4-使用自动页边距演示的垂直中心

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

1
2
margin-top: auto;
margin-bottom: auto;

号

2-垂直中心带柔性连接盒：

Vertical center grid columns。

由于bootstrap 4 .row现在是display:flex，您可以简单地在任何列上使用align-self-center来垂直居中…

1
2
3
4
5
6
                 Center
               
           
           
               
                    Taller

或者，在整个.row上使用align-items-center垂直居中对齐行中的所有col-*…

1
2
3
4
5
6
                 Center
               
           
           
               
                    Taller

引导4-垂直中心不同高度列演示

3-使用显示工具的垂直中心：

bootstrap 4具有可用于display:table、display:table-cell、display:inline等的显示实用程序。这些可以与垂直对齐实用程序一起用于对齐内联、内联块或表单元元素。

1
            I am centered vertically

引导4-使用显示实用程序演示的垂直中心

另请参见：引导4中的垂直居中对齐

引导程序3

要居中的项目容器上的flexbox方法：

1
2
3
4
.display-flex-center {
    display: flex;
    align-items: center;
}

。

转换translatey方法：

1
2
3
4
5
6
7
8
9
10
.transform-center-parent {
    position: relative;
    transform-style: preserve-3d;
}

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

。

显示内联方法：

1
2
3
4
5
6
7
8
.display-inline-block {
    display: inline;
}
.display-inline-block > div {
    display: inline-block;
    float: none;
    vertical-align: middle;
}

引导3对中方法演示

相关讨论

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

1
2
3
4
5
6
7
8
9
10
11
.valign {
  font-size: 0;
}

.valign > [class*="col"] {
  display: inline-block;
  float: none;
  font-size: 14px;
  font-size: 1rem;
  vertical-align: middle;
}

。

1
2
3
4
5
6
7
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>

   
      Big
   
   
       Small

这里的限制是不能从父元素继承字体大小，因为行将字体大小设置为0以删除空白。

我想我会分享我的"解决方案"，以防它能帮助其他不熟悉@media查询的人。

多亏了@hashemqolami的回答，我建立了一些可以像col-*类那样移动的媒体查询，这样我就可以将col-*用于移动设备，但在大屏幕的中心垂直对齐显示它们，例如。

1
 

.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
.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行等)，需要一些更高级的结尾，但是对于一个简单的页，它的-xs和-sm以及更大的行，这是很好的。

相关讨论

我更喜欢大卫沃尔什垂直中心CSS的这种方法：

1
2
3
4
5
.children{
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

。

transform不是必需的，它只是更精确地找到了中心。因此，Internet Explorer 8的居中度可能稍低，但它仍然不错-我可以使用-转换二维。

相关讨论

这是我的解决方案。只需将这个类添加到您的CSS内容中。

1
2
3
4
5
.align-middle {
  display: flex;
  justify-content: center;
  align-items: center;
}

号

那么您的HTML应该如下所示：

1
2
3
4
5
    Item
    Item
 
 
    Item

号

1
2
3
4
5
.align-middle {
  display: flex;
  justify-content: center;
  align-items: center;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<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
  </head>
  <body>
   
     
       
         
            Item
            Item
         
         
            Item
         
       
     
   
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js">
  </body>
</html>

。

相关讨论

我只是做了这个，它做了我想做的。

1
2
3
4
.align-middle {
  margin-top: 25%;
  margin-bottom: 25%;
}

号

现在我的页面看起来像

1
2
3
4
5
6
7
8
9
10
11
12
13
    content

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

号

相关讨论

我真诚地发现以下代码使用Chrome，而不是当前选定答案以外的其他浏览器：

1
2
3
4
5
6
7
8
9
10
11
12
.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;
}

。引导链接

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

我也遇到了同样的问题。在我的例子中，我不知道外容器的高度，但我是这样固定的：

首先设置你的html和body元素的高度，使它们为100%。这很重要！如果不这样做，html和body元素将简单地继承其子元素的高度。

1
2
3
html, body {
   height: 100%;
}

然后我有了一个外部容器类：

1
2
3
4
5
6
.container {
  display: table;
  width: 100%;
  height: 100%; /* For at least Firefox */
  min-height: 100%;
}

号

最后是具有类的内部容器：

1
2
3
4
.inner-container {
  display: table-cell;
  vertical-align: middle;
}

HTML简单如下：

1
2
3
4
5
6
7
8
9
<body>
   
     
        <p>
Vertically Aligned
</p>
     
   
</body>

。

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

J小提琴

不需要表格和表格单元格。使用变换可以很容易地实现。

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

代码：

1
2
3
4
5
6
7
8
9
10
11
12
.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%);
}

号

1
2
3
4
5
6
7
8
9
10
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />

 
   
      Big
   
 
 
   
      Small

号

如果您使用的是较低版本的引导程序，并且自己编译成CSS，那么可以使用一些实用程序类来与引导程序类一起使用。

我发现这些方法在我想要保留引导网格系统的响应性和可配置性(比如使用-md或-sm)的情况下工作得非常好，但是我希望给定行中的所有列都具有相同的垂直高度(这样我就可以垂直对齐它们的内容并使行中的所有列共享一个C)。欧蒙中间)。

CSS/更少：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
.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：

1
2
3
4
        ...
   
   
        ...

号

我详细阐述了Zessx的答案，以便在不同的屏幕大小上混合不同的列大小时更容易使用。

如果使用sass，可以将其添加到scss文件中：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
@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(如果不使用SAS，则可以直接在样式表中使用)：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
@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;
    }
}

号

现在您可以在这样的响应列中使用它：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
            <p>

                This content is vertically aligned on tablets and larger. On mobile it will expand to screen width.
           
</p>
       
            <p>

                This content is vertically aligned on tablets and larger. On mobile it will expand to screen width.
           
</p>
       
   
   
       
            <p>

                This content is vertically aligned on desktops and larger. On tablets and smaller it will expand to screen width.
           
</p>
       
            <p>

                This content is vertically aligned on desktops and larger. On tablets and smaller it will expand to screen width.
           
</p>

号

相关讨论

自引导4以来，本机支持Flex行为。在row分区中添加d-flex align-items-center。您不再需要修改CSS内容。

简单示例：http://jsfiddle.net/vgks6l74/

1
2
3
4
<!-- language: html -->

    Big
   Small

号

举个例子：http://jsfiddle.net/7zwtl702/

1
2
3
4
5
6
7
<!-- language: html -->

   
        Big
   
   
        Small

号

来源：flex·bootstrap

好吧，不小心我混合了一些解决方案，现在它终于适用于我的布局，我试图用最小分辨率制作一个3x3表，其中包含引导列。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
/* 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;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />


 
    1
 
 
    2
 
 
    3
 
 
    4
 
 
    5
 
 
    6
 
 
    7
 
 
    8
 
 
    9

。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
    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;
    }

。

1
2
3
4
5
    <span>
       
       
       
    </span>

有几种方法可以做到：

  • 使用

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

    。

    容器的CSS

    1
    display: table;

    号

  • 使用填充和媒体屏幕来更改相对于屏幕大小的填充。谷歌@媒体屏幕了解更多。

  • 使用相对填充

    即按百分比指定填充

    • 试试这个，

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    .exe {
      font-size: 0;
    }

    .exe > [class*="col"] {
      display: inline-block;
      float: none;
      font-size: 14px;
      font-size: 1rem;
      vertical-align: middle;
    }

    号

    1
    2
    3
    4
    5
    6
    7
    <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>

       
          Big
       
       
           Small

    号

    使用bootstrap 4(目前在alpha中)可以使用.align-items-center类。所以你可以保持引导程序的响应特性。我马上就可以工作了。请参阅引导4文档。

    相关讨论

    HTML

    1
    2
    3
    4
    5
        <div class="col-xs-2 pull-bottom"
             style="height:100px;background:blue">
       
        <div class="col-xs-8 pull-bottom"
             style="height:50px;background:yellow">

    号

    CSS

    1
    2
    3
    4
    5
    .pull-bottom {
        display: inline-block;
        vertical-align: bottom;
        float: none;
    }

    号

    我遇到了同样的情况，我想在一行中垂直对齐几个DIV元素，发现引导程序类col xx-xx将样式应用于float:left形式的DIV。

    我必须将该样式应用于诸如style="float:none"之类的DIV元素，并且所有的DIV元素都是垂直对齐的。以下是工作示例：

    1
     

    。J小提琴链接

    以防有人想了解有关float属性的更多信息：

    W3学校-浮动

    相关讨论