li标签中的span标签如何垂直居中？

发布于
2017-02-23

正常情况下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>

html css

阅读 18.5k

4 个回答

得票最新

xiatianlong

2.2k42854

发布于
2017-02-23

✓ 已被采纳

既然你都把span设置block了那就跟div没什么区别了。
可以参考这个（亲测有效）：https://www.zhihu.com/questio...

toBeTheLight

16.6k41634

发布于
2017-02-23

更新于
2017-02-23

在原有基础上添加

li{
 position:relative;
}
span{
 position:absolute;
 margin:auto;
 left:0;
 right:0;
 top:0;
 bottom:0;
}

原理是，定位元素（以竖直方向为例）的top+bottom+其自身高+竖直margin=包含块尺寸。由于只有margin未设置具体值，则自动计算为居中。
踩得自己看。
好好看看是不是居中的。
动动手指敲一下。
https://jsfiddle.net/kj5gpg1x/
再看看只写竖直方向是不是竖直方向居中！
https://jsfiddle.net/0L43aftc/