当实现多行文本居中时,很自然想到以下设置给父级设置display:table;给子集设置display:table-cell;和verticle:middle;
如果其中是中文的话一切正常,中英混合也还ok,可是若是纯英文的话会发现他压根不会换行,除此之外还会抵消掉你原本的外层盒子的宽度,对比如下
sddljfslkddflkdsfsdfsadsadfsdfsdfqwersdfasdfsdf
<style type="text/css"> .haha{ width:200px; height:200px; word-wrap: break-word; background:#bfa; display:table; color:white; }
p{
display:table-cell;
vertical-align:middle;
}
</style>