设置行内元素宽高和背景色后，行内元素文本不水平垂直居中解决方案

最新推荐文章于 2023-03-06 11:34:51 发布

吾欲乘风归去，又恐琼楼玉宇

最新推荐文章于 2023-03-06 11:34:51 发布

阅读量740

点赞数

分类专栏： html css 文章标签： css 前端 css3

本文链接：https://blog.csdn.net/NeiHan2020/article/details/121944537

版权

本文介绍了行内元素在设置宽高和背景色后，其文本无法水平垂直居中的问题及解决方案。通过使用`display: inline-block`设置宽高，并结合`text-align: center`实现水平居中，以及`line-height`等于元素高度来实现垂直居中，使文本在元素内正确居中显示。

摘要由CSDN通过智能技术生成

前言

行内元素：指在同一行内不自动换行，可以和其他行内元素在同一水平的元素，不可以设置宽高。

行内元素设置宽高：行内元素想要设置宽高，需要用display：inline-block设置（详解如下表）。

display值	作用
display:block	设置元素为块级元素（块级元素独占一行，可以设置宽高）
display:inline	设置元素为行内元素（行内在一行排列，不可以设置宽高）
display：inline-block	设置元素为行内块级元素（此值见名知意，融合了块级元素和行内元素的特性，是一个可以设置宽高的块级元素）