如何垂直居中使用CSS動態顯示1行或2行文本？

Question

請注意所附圖像/線框。我如何用CSS構建這個元素。如果有一行文字是垂直居中的，但是也支持兩行也是垂直居中的？

感謝

Answer 1

您可以通過您的包裝股利display:table:和你內心的文字DIV display:table-cell做到這一點。見下面的例子：

HTML：

<div class="wrapper"> 
    <div class="inner"> 
     One Line</br> 
     Two Line</br> 
     Three Line</br> 
    </div> 
</div> 

CSS：

.wrapper{ 
width:400px; 
height:200px; 
display:table; 
background:brown; 
} 

.inner{ 
display:table-cell; 
vertical-align:middle; 
text-align:center; 
} 

FIDDLE： http://jsfiddle.net/pgwL47oy/1/

Answer 2

這是在你的問題中留言已經提到的，但通常的用法display: table-cell;與vertical-align: middle;是你所追求的。

的想法是讓父容器顯示爲一個表display: table;，然後你使用含有這些文本節點跨度或段落元素被賦予上述table-cell顯示器vertical-align。

這對我來說很有用，應該值得一試！

Here's a CSS Tricks article that could help you out further

希望幫助！ :)