Html 在 div 列内垂直对齐中间
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29658584/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Vertical align middle inside div columns
提问by David Martins
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%.
这是我使用的完全基于百分比的基本结构。这是基于一系列部分的响应式单页布局，每个部分的 min-height 设置为 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>
回答by isherwood
回答by David Rubin
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/stackoverflow-128.png">
</div>
</div>
</div>
</section>回答by j08691
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%，但是您浮动了应该是 display:table-cell 的内容，并在应该是 table 的内容上设置了 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>回答by David Martins
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 Floatingthe 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.
有人会认为，对于布局结构如此重要的东西，此时此刻会有一些明显、优雅和简单的解决方案。显然它有，它被称为Display Table。它在某些非常特定的情况下可能有限制，但总的来说，这就是您所需要的。它坚如磐石，你几乎可以用它做任何你想做的事情。不幸的是，我认为“桌子”这个词仍然是一种禁忌。然而，这种方法简单、易懂、可靠，并且不需要任何黑客行为就可以达到预期的效果。通过这种方式，总是很困难的垂直对齐也变得容易。
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.
出于某种原因（可能是因为讨厌的词“表”），您将无法通过对基本 css 列的简单搜索在任何地方找到建议的这种方法。
I thought this articles on the subject were interesting:
我认为关于这个主题的这篇文章很有趣：
Give Floats the Flick in CSS Layouts
