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

你可以试试这个：

＆＃13;

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;
}

＆＃13;

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

＆＃13;

Answer 3

当你使用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/stackoverflow-128.png">
            </div>
        </div>
    </div>
</section>

Answer 4

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

我发现自己经常使用不同的方法来构建围绕浮动元素的列，并且在某种程度上总是需要一些黑客攻击才能完全按照我想要的方式行事，留下我的一种不一致和不可靠的感觉。

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

这就是你需要的简单结构：

.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栏中的垂直对齐中间

4 个答案: