736.【前端】一文读懂display: inline-bloc
2023-07-19 本文已影响0人
七镜
display: inline-block是CSS中的一个属性值,用于设置元素的显示模式。它结合了inline和block的特点,即既能保持元素在一行内排列,又能设置元素的宽高、内外边距等样式。display: inline-block常用于创建水平导航栏、网格布局等场景,具有较高的灵活性和兼容性。
display: inline-block的特点如下:
- 元素会在一行内排列,直到容器的宽度不足时才会换行。
- 元素可以设置宽高、内外边距等样式,不受父元素或子元素的影响。
- 元素的垂直对齐方式由vertical-align属性控制,默认为baseline。
- 元素之间会产生空白间隙,这是由于HTML源码中的换行符或空格导致的。可以通过设置font-size: 0或使用注释符来消除间隙。
下面这串代码可以实现文字居中对齐(包含最后一行):
label{
font-size: 18px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #000000;
line-height: 32px;
text-align: center;
display: inline-block;
}