美文网首页前端
736.【前端】一文读懂display: inline-bloc

736.【前端】一文读懂display: inline-bloc

作者: 七镜 | 来源:发表于2023-07-19 22:46 被阅读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;
    
            }
    

    相关文章

      网友评论

        本文标题:736.【前端】一文读懂display: inline-bloc

        本文链接:https://www.haomeiwen.com/subject/jwyaudtx.html