正常情况下li标签中的span标签可以通过设置li标签的height和line-height一致来实现span标签在li标签中的垂直居中，但是我发现当把span标签display属性设置为block，并设置尺寸以后，这个方法就无效了，使用vertical-align：middle也没用，请问为什么？代码如下：
<!DOCTYPE html><html>
<head>
<meta charset="utf-8">
<title></title>
<style media="screen">
li{ height: 30px; line-height: 30px; border: 1px solid red; }
span{ display: block; width: 30px; height: 20px; border: 1px solid blue; }
</style>
</head>
<body>
<ul>
<li><span>abcdefg</span></li>
<li><span>abcdefg</span></li>
<li><span>abcdefg</span></li>
</ul>
</body></html>
数据分析师2017-10-01 00:28:47
spanタグをliタグの垂直方向の中央に配置するにはどうすればよいですか? -PHP中国語サイトQ&A-liタグ内でspanタグを縦方向の中央に配置するにはどうすればよいですか？ -PHP中国語サイトQ&A
ぜひ見て学んでください。
阿神2017-02-23 09:41:01
在原有基础上添加
li{
position:relative;
}
span{
position:absolute;
margin:auto;
left:0;
right:0;
top:0;
bottom:0;
}原理是，定位元素（以竖直方向为例）的top+bottom+其自身高+竖直margin=包含块尺寸。由于只有margin未设置具体值，则自动计算为居中。
迷茫2017-02-23 09:40:08
height和line-height一致的方式只能作用于inline和inline-block的元素
vertical-align：middle只能作用于inline和table类元素
题主只要把span标签的display设置为inline-block就行了