li文字居中问题

Question

如上图所示，想让li标签中的文字始终位于中间，一行字数不超过3个，超过就自动换行。应该怎么实现呢

Answer 1

这不就是多行垂直居中的问题嘛。来看看这篇文章：css多行垂直居中（兼容ie6） ，另外根据你这个，需要限制一下内容的宽度和加上margin:0 auto;

补充：刚又仔细看了一下，发现你这个有两个字居中和三个字居中的，然后我发现无解。。。
唯一办法是使用js.
判断li的总文字个数，当字数小于或等于4时，给li加一个标签为li2. 当字数为大于4时，给li加标签为li3.当li小于或等于3时，给li加li1.

li2{width:32px; height:44px; line-height:22px;}/*一行2个字，两行*/
li3{width:48px; height:44px; line-height:22px;}/*一行3个字，两行*/
li1{width:16px; height:22px; line-height:22px;}/*一行*/

仅作参考。
或者你可以自定义内容，那就直接用br.再配合一下标签。

Answer 2

里面再嵌套一层元素，该元素宽度 3 个字符。该元素居中于 li 中。

Answer 3

1、flexbox
2、display：table/table-cell
3、绝对定位加transform
4、绝对定位加相对定位
5、绝对定位加js计算

Answer 4

设定两个字数的宽度，一般是foot-size的两倍；剩下的宽度用padding来凑

Answer 5

padding左右两边的值相等，把内容空间留出三个字的像素

Answer 6

楼主，这是要做到随意字数的多少都是居中的？？？

Answer 7

这文字万年不变的直接br换行好了

Answer 8

1.用box布局，将字用br隔开，能垂直水平居中
2.用display:table,字也用br隔开，也是自动垂直水平居中