在 div 列中垂直对齐中间

Question

在使用 CSS 的情况下，是否有可能在使用具有两列（一列带有图像，另一列带有文本）的行时，使其内容在中间垂直对齐？

我已经为此绞尽脑汁好几天了，并尝试了我能想到的一切。

这是我使用的基本结构，完全基于百分比。这是基于一系列部分的响应式单页布局，每个部分的最小高度设置为 100%。

CSS

html, body {
    width: 100%;
    height: 100%;
}

section {
    width: 100%;
    min-height: 100%;
    display:table;
    height:inherit;
}

.row {
    width: 100%;
    height: 100%;
    display:table-cell;
}

.col-left, .col-right {
    float: left;
    width: 50%;
    height: 100%;
}

/*--this should be vertically centred--*/

.content {
}

HTML

<section>

        <div class="row">

            <div class="col-left">
                <div class="content">
                    <h1>SOME TEXT</h1>
                </div>
            </div>

            <div class="col-right">
                <div class="content">
                    <img src="SOME IMAGE URL">
                </div>
            </div>

        </div>

</section>

JSFiddle

Answer 1

.row {
    ...
    display:table-row;
}
.col-left, .col-right {
    ...
    display: table-cell;
    vertical-align: middle;
}

Demo

Answer 2

当您使用 display:table 和 display:table-cell 布置结构时，您已经完成了 95%，但是您浮动了应该是 display:table-cell 的内容，并将 table-cell 设置在应该的内容上一直是表行。改用这个：

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}
section {
    width: 100%;
    min-height: 100%;
    display:table;
    height:inherit;
}
.row {
    width: 100%;
    height: 100%;
    display:table-row;
}
.col-left, .col-right {
    display:table-cell;
    width: 50%;
    height: 100%;
    vertical-align:middle;
}
.col-left {
    background: MidnightBlue
}
.col-right {
    background: ForestGreen;
    text-align: center;
}
.content {
    border: 1px dashed red;
}
h1 {
    font-family: sans-serif;
    color: white;
}

<section>
    <div class="row">
        <div class="col-left">
            <div class="content">
                 <h1>I should be vertically aligned in the middle...<br><br>And so should the image on the right...
                </h1>

            </div>
        </div>
        <div class="col-right">
            <div class="content">
                <img src="https://cdn4.iconfinder.com/data/icons/miu-flat-social/60/stackoverflow-128.png">
            </div>
        </div>
    </div>
</section>

Answer 3

你可以试试这个：

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}
section {
    width: 100%;
    min-height: 100%;
    display:table;
    height:inherit;
}
.row {
    width: 100%;
    height: 100%;
    display:table;
}
.col-left, .col-right {
    float: left;
    display:table;
    vertical-align:middle;
    width: 50%;
    height: 100%;
}
.col-left {
    background: MidnightBlue
}
.col-right {
    background: ForestGreen;
    text-align: center;
}
.content {
    display:table-cell;
    vertical-align:middle;
    height:100%;
    border: 1px dashed red;
}
h1 {
    font-family: sans-serif;
    color: white;
}

<section>
    <div class="row">
        <div class="col-left">
            <div class="content">
                 <h1>I should be vertically aligned in the middle...<br><br>And so should the image on the right...
                </h1>

            </div>
        </div>
        <div class="col-right">
            <div class="content">
                <img src="https://cdn4.iconfinder.com/data/icons/miu-flat-social/60/stackoverflow-128.png">
            </div>
        </div>
    </div>
</section>

Answer 4

对于任何对此主题感兴趣的人，这个问题和提供的答案在我身上提出了另一个问题，即在这种情况下应用哪种方法，实际上，对于一般的构建列：浮动或显示属性。对于像我这样的新手或自学成才的开发者来说，了解我在研究和测试后得出的结论可能会很有趣。

我发现我自己经常使用不同的方法来构建围绕浮动元素的列，并且以一种或另一种方式最终总是需要一些黑客来做我想要的，让我一种不一致和不可靠的感觉。

人们会认为，对于布局结构如此重要的东西，此时会有一些明显、优雅和简单的解决方案。显然它有，它被称为Display Table。它在一些非常特殊的情况下可能会有限制，但总的来说，这就是你所需要的。它坚如磐石，你几乎可以用它做任何你想做的事情。不幸的是，我认为“桌子”这个词仍然是一种禁忌。然而，这种方法简单、易于理解、可靠，并且不需要任何 hack 即可按预期运行。垂直对齐总是很困难的，这种方式也很容易。

你只需要这样一个简单的结构：

.container {
  display: table;
}
.row {
  display: table-row;
}
.col {
  display: table-cell;
}

出于某种原因（可能是因为“table”这个讨厌的词），您将无法在任何地方通过对基本 css 列的简单搜索找到建议的这种方法。

我觉得这篇关于这个主题的文章很有趣：

Give Floats the Flick in CSS Layouts

Farewell Floats: The Future of CSS Layout