扫码关注官方订阅号
正常情况下li标签中的span标签可以通过设置li标签的height和line-height一致来实现span标签在li标签中的垂直居中，但是我发现当把span标签display属性设置为block，并设置尺寸以后，这个方法就无效了，使用vertical-align：middle也没用，请问为什么？代码如下：
li{ height: 30px; line-height: 30px; border: 1px solid red; } span{ display: block; width: 30px; height: 20px; border: 1px solid blue; } abcdefg abcdefg abcdefg
╰つ ゛思 绪 万 千 , 不 如 努 力 向 前 .ヽ
li标签中的span标签如何垂直居中？-PHP中文网问答-li标签中的span标签如何垂直居中？-PHP中文网问答
围观一下哦，学习一下。
在原有基础上添加
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就行了
微信扫码关注PHP中文网服务号
QQ扫码加入技术交流群
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
PHP学习
技术支持
返回顶部
0 
3
2114
收藏
li标签中的span标签如何垂直居中？-PHP中文网问答-li标签中的span标签如何垂直居中？-PHP中文网问答
围观一下哦，学习一下。
在原有基础上添加
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就行了