如何垂直居中使用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

希望帮助！ :)