垂直居中内部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

- David Martins

---

可能是垂直居中: 中间对齐的重复问题。 - bpeterson76

Answer 1

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

演示

- isherwood

Answer 2

你使用了display:table和display:table-cell布局结构，已经完成了95%的工作，但你将应该是table-cell的元素浮动了，并且将应该是table row的元素设置为了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>

- j08691

---

非常感谢，我不是很擅长这个，而且我以前从未使用过这种构建列的技术。通常我只是使用一些左浮动的变体。哪种方法更可接受或更受欢迎？您的版本与下面的David Rubin的版本。哪一个最好？还是无所谓？ - David Martins

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>

- David Rubin

---

非常感谢大家。David，两种技术都很好用，在任何浏览器中它们之间的性能差异我无法分辨。我想知道哪一种更值得推荐。@isherwood，你的建议和David Rubin的建议，哪一个更可取？ - David Martins

经过进一步测试，我发现“isherwood”和“j08691”提供的解决方案更易理解，更简单，也更一致。去掉浮动对我来说也是一个优势。它也不需要额外的容器。使用您建议的替代方案时，我注意到当您缩小窗口时会出现行断裂，这需要额外修复。感谢您给我提供替代方案并比较的机会。不确定这是否意味着我不需要再次使用左浮动来构建列，但我希望如此。 - David Martins

Answer 4

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

我发现自己经常使用围绕浮动元素的不同构建列的方法，但无论如何最终总是需要一些黑客才能做到我想要的，让我感到不一致和不可靠。

人们会认为布局结构如此重要，在这个时代肯定有一些明显、优雅和简单的解决方案。显然有，它被称为显示表格。它可能在某些非常特定的情况下有限制，但一般来说这就是你所需要的。它非常牢固，你几乎可以做任何你想做的事情。不幸的是，我认为“表格”这个词仍然是一种禁忌。然而，这种方法简单、易懂、可靠，不需要任何黑客行为才能表现如预期。这样做垂直对齐总是很容易的。

像这样一个简单的结构就足够了：

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

对于某些原因（可能是由于麻烦的单词“table”），你无法通过基本css列的简单搜索找到此方法的建议。

我认为这些文章非常有趣： 在CSS布局中放弃浮动 CSS布局的未来：告别浮动

- David Martins