使用百分比高度垂直對齊元素內的文本？

Question

由於我有一個百分比高度的元素，我不能使用行高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％將無法工作，因為它將獲取text的值，而不是div元素。 只要height = line-height，它可以使用或不使用vertical-align

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>