css - li标签中的span标签如何垂直居中？
本文介绍了css - li标签中的span标签如何垂直居中？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
正常情况下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>
解决方案
既然你都把span设置block了 那就跟div没什么区别了 。
可以参考这个 （亲测有效）：https://www.zhihu.com/questio...
这篇关于css - li标签中的span标签如何垂直居中？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
