inline-block的DIV中垂直对齐跨度文本 [英] Vertical align span text inside inline-block div
问题描述
我建立了扁平化设计一个网站。我有一个报头和在它之下两种不同颜色的区块彼此相邻。我试图浮动左，右，但被告知使用显示：inline-block的，而不是
我遇到了一个问题，虽然。我希望把一些文字就在左侧和右侧块的中间，并试图使用对齐项：中锋，但想通了，只有在格设置为弯曲的作品
。所以我的问题是，我可以以某种方式让我的内联块，并在我的块（水平和垂直）？
中间让我的文字居中
体{
保证金：80px 0 0;
}
#pagewrapper {
宽度：100％;
}
的#header {
宽度：100％;
高度：80px;
背景颜色：＃008B8B;
位置：固定;
顶部：0;
}
.content左，
.content右{
宽度：50％;
高度：500px的;
颜色：#FFFFFF;
显示：-moz-直列堆栈;
显示：inline-block的;
缩放：1;
*显示：内联;
}
.content左{
背景颜色：＃66CC99;
}
.content右{
背景颜色：＃20B2AA;
}
＃头-BOT {
高度：800px;
背景颜色：＃F8F8FF;
}
#footer {
高度：50像素;
背景颜色：#AFEEEE;
}
。标题 {
字体大小：18像素;
}
＆LT;身体GT;
＆LT; DIV ID =pagewrapper＆GT;
＆LT; DIV ID =头＆GT;
＆LT; / DIV＆GT;
＆LT;！ - 标题结束 - ＆GT;
＆LT; DIV CLASS =内容左＆GT;
＆LT;跨度类=头衔＆gt;这是左含量小于/ SPAN＆GT;
＆LT; / DIV＆GT;
＆LT;！ - 内容左端 - ＆GT;
＆LT; DIV CLASS =内容权＆GT;
＆LT;跨度类=头衔＆gt;这是正确含量小于/ SPAN＆GT;
＆LT; / DIV＆GT;
＆LT;！ - 内容右端 - ＆GT;
＆LT; DIV ID =标头的机器人＆GT;
＆LT; / DIV＆GT;
＆LT;！ - 包头博特结束 - ＆GT;
＆LT; DIV ID =页脚＆GT;
＆LT; / DIV＆GT;
＆LT;！ - 页脚结束 - ＆GT;
＆LT; / DIV＆GT;
＆LT;！ - PageWrapper结束 - ＆GT;
＆LT; /身体GT;
在改变列的显示类型为表单元格可能会导致麻烦（如效果相对定位是未定义表单元格元素）另一种选择是加入了全高（伪）元素插入的列和调整了与＆LT ;跨度＆GT; 元素通过垂直垂直对齐：中间; 声明：
.content左，
.content右{文本对齐：中心; } / *水平对齐内嵌儿童* /
.content左：之后，.content右：后{
内容： ;
显示：inline-block的;
垂直对齐：中间; / *对齐内联级元素垂直* /
高度：100％;
}
。标题 {
垂直对齐：中间; / *对齐内联级元素垂直* /
}
有关详细信息，您可以参考 <一个href="http://stackoverflow.com/questions/25419552/how-to-align-a-label-to-the-bottom-of-a-div-in-css/25419852#25419852">my回答 在这里。
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.
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.
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>
While changing display type of columns to table-cell may cause a trouble (e.g. the effect of relative positioning 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:
.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 answer here.
这篇关于inline-block的DIV中垂直对齐跨度文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
