html - 在 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