CSS样式元素，同时保持它们的中心

Question

我有这个：

span:

display: table-cell;
vertical-align: middle;

和容器

li:

height: 20vh;
display: table;
text-align: center;

跨度水平居中，但当元素为<span>hello<br>world</span>时，我希望Hello和world在左侧对齐，同时在其父li中居中。

我怎样才能做到这一点？

感谢。

Answer 1

只需将text-align: left添加到span：

li{
   height: 20vh;
   display: table;
   text-align: center;
}

span{
   display: table-cell;
   vertical-align: middle;
   text-align: left;
}

FIDDLE

Answer 2

使用：

 text-align: left; 

根据需要添加此样式范围或li