Html 内联块 div 内垂直对齐跨度文本
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25457954/
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 span text inside inline-block div
提问by Jesper Andersen
I am building a website with a flat design. I have a header and under it two different coloured blocks next to each other. I tried float left and right but was advised to use display: inline-block instead.
我正在建立一个平面设计的网站。我有一个标题，在它下面有两个不同颜色的块，彼此相邻。我尝试左右浮动，但建议使用 display: inline-block 代替。
I ran into an issue, though. I want to place some text right in the middle of both the left and right block and tried to use the align-items: center, but figured out that only works if the div is set to flex.
不过，我遇到了一个问题。我想在左右块的中间放置一些文本，并尝试使用 align-items: center，但发现只有当 div 设置为 flex 时才有效。
So my question is, can I somehow keep my inline-block and get my text centered in the middle of my blocks (both horizontal and vertically)?
所以我的问题是，我可以以某种方式保持我的内联块并使我的文本居中在我的块中间（水平和垂直）？
body {
margin: 80px 0 0;
}
#pagewrapper {
width: 100%;
}
#header {
width: 100%;
height: 80px;
background-color: #008B8B;
position: fixed;
top: 0;
}
.content-left,
.content-right {
width: 50%;
height: 500px;
color: #FFFFFF;
display: -moz-inline-stack;
display: inline-block;
zoom: 1;
*display: inline;
}
.content-left {
background-color: #66CC99;
}
.content-right {
background-color: #20B2AA;
}
#header-bot {
height: 800px;
background-color: #F8F8FF;
}
#footer {
height: 50px;
background-color: #AFEEEE;
}
.title {
font-size: 18px;
}<body>
<div id="pagewrapper">
<div id="header">
</div>
<!-- End of Header -->
<div class="content-left">
<span class="title">This is left Content</span>
</div>
<!-- End of Content Left -->
<div class="content-right">
<span class="title">This is Right Content</span>
</div>
<!-- End of Content Right -->
<div id="header-bot">
</div>
<!-- End of Header-Bot -->
<div id="footer">
</div>
<!-- End of Footer -->
</div>
<!-- End of PageWrapper -->
</body>回答by Hashem Qolami
While changing display type of columns to table-cellmay cause a trouble (e.g. the effect of relativepositioning is undefined for table-cell elements) another option is adding a full-height (pseudo-)element into the columns and align that and the <span>element vertically by vertical-align: middle;declaration:
虽然将列的显示类型更改为table-cell可能会导致问题（例如relative，表格单元格元素的定位效果未定义），但另一种选择是将全高（伪）元素添加到列中，并<span>通过vertical-align: middle;声明将其与元素垂直对齐：
.content-left,
.content-right { text-align: center; } /* Align inline children horizontally */
.content-left:after, .content-right:after {
content: "";
display: inline-block;
vertical-align: middle; /* Align inline level elements vertically */
height: 100%;
}
.title {
vertical-align: middle; /* Align inline level elements vertically */
}
For further details, you could refer to my answerhere.
有关更多详细信息，您可以在此处参考我的回答。
回答by kinakuta
On your .content-left and .content-right divs change the display to table and add a text-align of center. For the .title spans, change the display to table-cell and add a vertical-align of middle;
在您的 .content-left 和 .content-right div 上，将显示更改为表格并添加文本居中对齐。对于 .title 跨度，将显示更改为 table-cell 并添加中间的垂直对齐；
.content-left, .content-right {
display: table;
text-align: center;
}
.title {
display: table-cell;
vertical-align: middle;
}
Here's a jsfiddleto demonstrate (I changed the divs to have a height of 200px so it's easier to see the centering effect in the smallish jsfiddle window)
这是一个jsfiddle来演示（我将 div 更改为 200px 的高度，以便在较小的 jsfiddle 窗口中更容易看到居中效果）
