灵活的箱体布局

随着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，最好使用一个额外的类。

这个答案是一个黑客，但我强烈建议你使用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已经更新

我也遇到了同样的问题。在我的情况下，我不知道外容器的高度，但这是我如何固定它:

首先设置html和body元素的高度，使它们为100%。这很重要!如果没有这一点，html和body元素将简单地继承它们的子元素的高度。

html, body {
   height: 100%;
}

然后我有一个外部容器类:

.container {
  display: table;
  width: 100%;
  height: 100%; /* For at least Firefox */
  min-height: 100%;
}

最后是带class的内部容器:

.inner-container {
  display: table-cell;
  vertical-align: middle;
}

HTML非常简单:

<body>
   <div class="container">
     <div class="inner-container">
        <p>Vertically Aligned</p>
     </div>
   </div>
</body>

这就是垂直对齐内容所需要的全部内容。看看小提琴:

杰斯菲德尔

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

好吧，我无意中混合了一些解决方案，现在它终于适用于我的布局，我试图在最小分辨率上制作一个3x3的带Bootstrap列的表。

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

在div的CSS中试试这个:

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