html - th垂直居中 - 栅格居中




与Bootstrap 3垂直对齐 (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来修复它,但我认为这不是响应式设计的一个好解决方案。


这个答案提出了一个黑客,但我强烈建议你使用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

如果您在代码中放置真实空间(如...</div> </div>... ),则使用inline-block会在块之间添加额外的空间。 如果列大小合计为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已经更新


灵活的箱子布局

随着CSS Flexible Box的问世,许多网页设计师的噩梦1已经解决。 其中一个最hacky,垂直对齐。 现在甚至可能在未知的高度

“二十年的布局黑客即将结束,也许不是明天,而是很快,而且是我们的余生。”

- 在W3Conf 2013的 CSS传奇Eric Meyer

柔性盒(或简称为Flexbox)是专为布局而设计的新版式系统。 该规范指出

Flex布局与块布局表面相似。 它缺少许多可以在块布局中使用的更复杂的以文本或文档为中心的属性,例如浮动和列。 作为回报,它可以获得简单而强大的工具来分发空间并以web应用程序和复杂网页经常需要的方式对齐内容。

在这种情况下它有什么用处? 好吧,走着瞧。

垂直对齐的列

使用Twitter Bootstrap,我们有一些.col-* s。 我们所需要做的就是将所需的.row 2显示为弹性容器框,然后通过align-items属性将其所有弹性项目 (列)垂直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

align-items

Flex项目可以在Flex容器当前行的横轴上对齐,类似于justify-content但是在垂直方向。 align-items为所有flex容器的项目(包括匿名flex项目)设置默认对齐方式。

align-items: center; 按中心值, 弹性物品的边距框在线内的交叉轴上居中。

大警戒

重要说明#1:除非您将.col-xs-#类中的一个指定给列,否则Twitter Bootstrap不会指定特殊小型设备中列的width

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

但是,您也可以通过更改display: flex; 关闭 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的approach 。

重要说明#2:由于简洁,省略了供应商前缀。 Flexbox语法在此期间已更改。 新的书面语法不适用于较早版本的Web浏览器(但与Internet Explorer 9不同,Internet Explorer 10及更高版本支持Flexbox)。

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

如果你点击Demo中的“切换编译视图” ,你会看到CSS声明的前缀版本(感谢Autoprefixer )。

垂直对齐内容的全高立柱

正如你在前面的演示中看到的,列(flex项目)不再像它们的容器(flex容器盒,即.row元素)那么高。

这是因为使用align-items属性的center值。 默认值是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  */
}

输出

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

最后但并非最不重要的一点 ,请注意,此处的演示和代码片段旨在为您提供一种不同的想法,以提供一种实现此目标的现代方法。 如果您要在现实世界的网站或应用程序中使用此方法,请介意“ 大型警报 ”部分。

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

1. 将div内的图像与响应高度垂直对齐 2.最好使用额外的类,以免更改Twitter Bootstrap的默认.row


2018年更新

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

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

如果您尝试居中的元素的父元素没有定义的高度 ,则没有任何垂直居中解决方案可行!

Bootstrap 4

现在默认情况下 BS4是flexbox,有许多不同的垂直对齐方法,使用: auto-marginsflexbox utilsdisplay 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>

或者,在整个.row上使用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 - 垂直中心使用显示设备:

引导程序4具有可用于显示的显示实用程序display:tabledisplay:table-celldisplay:inline等。这些可与垂直对齐应用程序一起使用,以对齐内联,内嵌块或表格单元格元素。

<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 Demo的垂直中心

另请参阅: 自举中的垂直对齐中心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中心化方法演示


不需要表格和表格单元格。 它可以通过变换轻松实现。 例如: http://codepen.io/arvind/pen/QNbwyM : 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>


使用Bootstrap 4(目前处于alpha版本),您可以使用.align-items-center类。 所以你可以保持Bootstrap的响应特性。 工作对我来说很好。 请参阅Bootstrap 4文档


在div的CSS中试试这个:

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

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

尝试这个,

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


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

我想我会分享我的“解决方案”,以防止其他人不熟悉@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;
    }
}

更复杂的布局,每个屏幕分辨率需要不同数量的列(例如,2行用于-xs,3用于-sm,4用于-md等)需要一些更高级的finagling,但对于带-xs的简单页面堆叠和-sm和更大的行,这工作正常。


我真的发现下面的代码可以使用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[class*='col-']上的div[class*='col-']


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

我必须将style应用于div元素,例如style =“Float:none”,并且所有div元素都开始垂直对齐。 这是一个工作示例:

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

JsFiddle链接

以防万一有人想了解更多关于浮动资产的信息:

W3Schools - Float


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

1。

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

和容器的CSS来

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

  2. 使用相对填充,即按照%指定填充。

希望能帮助到你


自从Bootstrap以来,Flex行为本身就受到支持。4. row div中添加d-flex align-items-center 。 你不再需要修改你的CSS。

简单的例子: http://jsfiddle.net/vgks6L74/ : 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/ : 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>

来源: https://getbootstrap.com/docs/4.0/utilities/flex/https://getbootstrap.com/docs/4.0/utilities/flex/


    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>





twitter-bootstrap-3