div列中的垂直对齐中间

Is it possible, with CSS, while using a row with two column, one with an image and another with text, to have their content vertically aligned in the middle?

使用CSS时，是否可以使用具有两列的行，一行包含图像而另一列包含文本，以使其内容在中间垂直对齐？

I've been banging my head for days over this and tried everything I could possibly think of.

几天以来我一直在敲打我的脑袋并尝试了我能想到的一切。

This is the basic structure that I'm using which is entirely based on percentages. This is for a responsive one-page layout based on a series of sections, each with min-height set to 100%.

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

CSS

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

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

的jsfiddle

4 个解决方案

#1

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

Demo

演示

#2

you can try this:

你可以试试这个：

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

#3

You were 95% of the way there as you laid out the structure using display:table, and display:table-cell, but you floated what should have been display:table-cell, and set table-cell on what should have been table row. Use this instead:

当你使用display：table和display：table-cell布局结构时，你有95％的路由，但你浮动应该显示的内容：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/*-128.png">
            </div>
        </div>
    </div>
</section>

#4

For anyone interested in this topic, this issue and the answers provided raised in me another question regarding which method to apply in this situation, and in fact, for building columns in general: Floating or Display property. For any newbie or self-taught wannabe developer like my self may be interesting to know what I've concluded after research and testing.

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

I find my self often using different methods for building columns that revolve around Floating the elements and in one way or another always require some hacking in the end to do exactly what I want, leaving me with a feeling of inconsistency and unreliability.

我发现自己经常使用不同的方法来构建围绕浮动元素的列，并且以某种方式总是需要一些黑客到底完全按照我的意愿行事，让我感觉不一致和不可靠。

One would think that something so vital for layout structure would have at this point in time some obvious, elegant and simple solution. Apparently it has, and it's called Display Table. It might have limitations in some very specific situations but in general it's all you need. It's rock solid and you can pretty much do anything you want with it. Unfortunately, I think the word "table" is still a kind of taboo. This method however is simple, comprehensible, reliable and doesn't require any hacks to behave as expected. Vertical alignment which is always a struggle is also made easy this way.

人们会认为对于布局结构至关重要的东西在这个时间点会有一些明显，优雅和简单的解决方案。显然它有，它叫做显示表。它可能在某些非常具体的情况下有局限性，但总的来说，这就是你所需要的。它坚如磐石，你可以随心所欲地做任何事情。不幸的是，我认为“桌子”这个词仍然是一种禁忌。然而，该方法简单，易于理解，可靠并且不需要任何黑客行为按预期行事。通过这种方式，纵向对齐也很容易。

A simple structure like this is all you need:

这样的简单结构就是您所需要的：

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

For some reason (probably because of the nasty word "table"), you wont be able to find this method suggested anywhere with a simple search on basic css columns.

出于某种原因（可能是因为讨厌的单词“table”），你无法通过简单的基本css列搜索找到这个方法。

I thought this articles on the subject were interesting:

我认为关于这个主题的文章很有趣：

Give Floats the Flick in CSS Layouts

在CSS布局中为Floats添加轻弹

Farewell Floats: The Future of CSS Layout

告别花车：CSS布局的未来