让 li 的 a 居中，css行高等于容器高度可以垂直居中

居中 高度 li 垂直 基线 css 高等 容器 可以 行高 编程技术
发布日期 2022-11-01 更新日期 2022-11-01 阅读次数 72 文章字数 363

让 li 中的 a 垂直居中，则不需要 li 设置高度，直接让 a 增加行高，让 a 在 li 中垂直居中

水平居中则使用 text-align: center，则 li 中的 a 水平垂直居中

a{
    line-height:30px;
    text-align:center;
}

高度，是底线到顶效的高度。

行高，是两行文本的基线相差的高度，行高刚好等于高度时，则相当于有 -上基线，+下基线，上下基线高度一致，则元素垂直居中。

内容区：是指底线和顶线包裹的区域

行高(line-height)：包括内容区与以内容区为基础对称拓展的空白区域

 行距：指相邻文本行间上一个文本行基线和下一文本行顶线之间的距离。

注意：顶线和底线是相对于中线来计算的，当line-height为0时，顶线和底线将重合，而中线是相对于基线来计算的，基线始终在中线的下方（x的底部），vertical-algin：middle并不是对其到中线而是对齐到基线以上1/2x的位置。

文章作者: 朱丰华

文章链接: https://smart.52dixiaowo.com/blog/post-169.html

版权声明: 本博客所有文章除特別声明外，均采用 CC BY 4.0 许可协议。

居中 高度 li 垂直 基线 css 高等 容器 可以 行高

发表评论