灵活的箱体布局

随着CSS Flexible Box的出现，许多网页设计师的噩梦1都得到了解决。其中最俗气的就是垂直对齐。现在，即使在未知的高度也有可能。

“20年的布局攻略即将结束。也许不是明天， 但很快，而且是我们的余生。” - CSS传奇Eric Meyer在W3Conf 2013

Flexible Box(或简称Flexbox)是一种新的布局系统，专门为布局目的而设计。该规范规定:

Flex布局表面上类似于块布局。它缺少很多 可以使用的更复杂的以文本或文档为中心的属性 在块布局中，如浮动和列。作为回报，它得到了简单 以及分配空间和调整内容的强大工具 web应用程序和复杂网页通常需要的。

它对这种情况有什么帮助呢?让我想想。

---

垂直对齐柱

使用Twitter引导，我们有一些。col-*的。行。我们所需要做的就是将所需的.row2显示为一个伸缩容器框，然后通过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;
}

输出

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

明确对齐项:居中

8.3跨轴对齐:align-items属性 伸缩项可以在伸缩容器当前行的十字轴上对齐，类似于justify-content，但方向是垂直的。Align-items为所有伸缩容器的项设置默认对齐方式，包括匿名伸缩项。 对齐项目:中心; 根据中心值，伸缩项的边距框位于该行内的十字轴中心。

---

大的警报

重要提示#1:Twitter Bootstrap不会在特别小的设备中指定列的宽度，除非你给列指定一个.col-xs-#类。

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

但你也可以通过更改显示来关闭Flexbox布局:flex;显示:块;在特定的屏幕尺寸。例如:

/* 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的方法。

重要注意#2:为了简洁，省略了供应商前缀。在此期间，Flexbox语法已被更改。新编写的语法不能在旧版本的web浏览器上运行(但不是像Internet Explorer 9那么老!Internet Explorer 10及更高版本支持Flexbox)。

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

如果你在Demo中点击“Toggle Compiled View”，你会看到CSS声明的前缀版本(感谢Autoprefixer)。

---

内容垂直对齐的全高列

正如您在前面的演示中看到的，列(伸缩项)不再像它们的容器(伸缩容器盒)那么高。例如，.row元素)。

这是因为使用中心值对齐项目属性。默认值是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  */
}

输出

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

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

---

为了进一步阅读，包括浏览器支持，这些资源将是有用的:

Mozilla开发者网络-灵活的盒子 指南Flexbox - CSS技巧 HTML5Rocks - Flexbox quick SmashingMagazine -中心元素与Flexbox Philip Walton -由Flexbox解决 我可以使用:灵活的盒子布局模块

---

1. 垂直对齐div内的图像与响应高度 2. 为了不改变Twitter Bootstrap的默认.row，最好使用一个额外的类。

我详细阐述了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>

这个答案是一个黑客，但我强烈建议你使用flexbox(正如@Haschem回答中所述)，因为现在到处都支持它。

演示链接: - Bootstrap 3 - Bootstrap 4 alpha 6

你仍然可以在需要的时候使用自定义类:

.vcenter { 显示:inline-block; vertical-align:中间; 浮:没有; ｝ < div class = "行" > <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">小</div> < / div > < / div >

引导

使用内联块在块之间增加额外的空间，如果你在你的代码中允许一个真正的空间(如…< / 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="[…]<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内容。

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

从Bootstrap 4开始，Flex行为就得到了原生支持。在行div中添加d-flex align-items-center。您不再需要修改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

在div的CSS中试试这个:

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