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

你可以试试这个：

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/Whosebug-128.png">
            </div>
        </div>
    </div>
</section>

Answer 3

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

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/Whosebug-128.png">
            </div>
        </div>
    </div>
</section>

Answer 4

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

我发现我自己经常使用不同的方法来构建围绕浮动元素的列，并且以某种方式总是需要一些黑客攻击才能完全按照我的意愿行事想要，给我一种前后矛盾和不可靠的感觉。

有人会认为对于布局结构如此重要的东西此时会有一些明显、优雅和简单的解决方案。显然它有，它被称为 Display Table。它在某些非常具体的情况下可能有局限性，但通常这就是您所需要的。它坚如磐石，你几乎可以用它做任何你想做的事。不幸的是，我认为 "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

div 列内垂直居中对齐

Vertical align middle inside div columns

html

css

vertical-alignment