css - 以百分比高度垂直对齐元素内的文本？

Question

因为我有一个百分比高度的元素，所以我不能使用 line-height hack。有没有人对如何解决这个问题有任何想法？

<div height="100%">
    I want to be vertically aligned in the middle
</div>

Answer 1

这就是你想要的：http ://www.jakpsatweb.cz/css/priklady/vertical-align-valid-solution-en.html

Answer 2

如果您设置字体大小，并且您知道您拥有的文本行数。您可以将文本包装在一个跨度中。并在跨度上使用以下 CSS。

span {
    font-size:20px;
    margin-top:-10px; //half the font-size (or (font-size*number of lines)/2)
    position: relative;
    top: 50%;
}

Answer 3

您必须设置 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>