[英]How do I vertically center text in a DIV using CSS?
I'm having trouble center text vertically in a DIV using CSS. 我在使用CSS的DIV中垂直居中放置文本时遇到麻烦。 I've followed the related answers here on SO and elsewhere, but can't seem to get it to work.
我在SO和其他地方都遵循了相关的答案,但似乎无法使其正常工作。 My simplified scenario is
我的简化方案是
<div class="outer">
<div class="header-title">
<span class="header-text">This is the title</span>
</div>
</div>
and 和
div.outer {
position: relative;
height: 200px;
border-style: solid;
border-width:1px;
}
div.header-title {
position: absolute;
font-size: 36px;
height: 100%; /* required */
color: green;
border-style: dashed;
border-width:1px;
}
span.header-text {
vertical-align: middle;
border-style: dotted;
border-width:1px;
}
but the result (in Safari) leaves the 'header-text' span
at the top of the 'header-title' div
: 但结果(在Safari中)使“标题文本”
span
位于“标题标题” div
的顶部:
your example shows a good workaround for vertically centering elements in a div: 您的示例显示了将div垂直居中的一种很好的解决方法:
display: table-cell;
vertical-align: middle;
so add it to your div css: 因此,将其添加到您的div CSS中:
div.header-title {
position: absolute;
font-size: 36px;
height: 100%; /* required */
color: green;
display: table-cell;
vertical-align: middle;
border-style: dashed;
border-width:1px;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.