因为我有一个百分比高度的元素,所以我不能使用 line-height hack。有没有人对如何解决这个问题有任何想法?
<div height="100%">
I want to be vertically aligned in the middle
</div>
因为我有一个百分比高度的元素,所以我不能使用 line-height hack。有没有人对如何解决这个问题有任何想法?
<div height="100%">
I want to be vertically aligned in the middle
</div>
如果您设置字体大小,并且您知道您拥有的文本行数。您可以将文本包装在一个跨度中。并在跨度上使用以下 CSS。
span {
font-size:20px;
margin-top:-10px; //half the font-size (or (font-size*number of lines)/2)
position: relative;
top: 50%;
}
您必须设置 div 的高度值,然后设置 line-height: value_of_div_height。line-height 100% 不起作用,因为它将采用文本值,而不是 div 元素。只要 height=line-height,它可以使用或不使用垂直对齐
div {
height: 200px;
line-height: 200px;
display: block;
}
如果您想处理 div 元素内的段落,另一种方法:http: //www.w3.org/Style/Examples/007/center
DIV.container {
min-height: 10em;
display: table-cell;
vertical-align: middle }
...
<DIV class="container">
<P>This small paragraph...
</DIV>