html - CSS 样式元素，同时保持它们居中

Question

我有这个:

span:

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

和容器

li:

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

span水平居中，但是当元素为<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