84669 person learning
152542 person learning
20005 person learning
5487 person learning
7821 person learning
359900 person learning
3350 person learning
180660 person learning
48569 person learning
18603 person learning
40936 person learning
1549 person learning
1183 person learning
32909 person learning
正常情况下li标签中的span标签可以通过设置li标签的height和line-height一致来实现span标签在li标签中的垂直居中，但是我发现当把span标签display属性设置为block，并设置尺寸以后，这个方法就无效了，使用vertical-align：middle也没用，请问为什么？代码如下：
╰つ ゛思 绪 万 千 , 不 如 努 力 向 前 .ヽ
How to vertically center the span tag in the
li tag? -PHP Chinese website Q&A-How to vertically center the span tag in the li tag? -PHP Chinese website Q&A
Let’s take a look and learn.
在原有基础上添加
li{ position:relative; } span{ position:absolute; margin:auto; left:0; right:0; top:0; bottom:0; }
原理是，定位元素（以竖直方向为例）的top+bottom+其自身高+竖直margin=包含块尺寸。由于只有margin未设置具体值，则自动计算为居中。
height和line-height一致的方式只能作用于inline和inline-block的元素
vertical-align：middle只能作用于inline和table类元素
题主只要把span标签的display设置为inline-block就行了
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
How to vertically center the span tag in the
li tag? -PHP Chinese website Q&A-How to vertically center the span tag in the li tag? -PHP Chinese website Q&A
Let’s take a look and learn.
在原有基础上添加
li{ position:relative; } span{ position:absolute; margin:auto; left:0; right:0; top:0; bottom:0; }原理是，定位元素（以竖直方向为例）的top+bottom+其自身高+竖直margin=包含块尺寸。由于只有margin未设置具体值，则自动计算为居中。
height和line-height一致的方式只能作用于inline和inline-block的元素
vertical-align：middle只能作用于inline和table类元素
题主只要把span标签的display设置为inline-block就行了