首页 > li文字居中问题

li文字居中问题

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


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


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


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


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


这不就是多行垂直居中的问题嘛。来看看这篇文章: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.再配合一下标签。


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


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


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

【热门文章】
【热门文章】