不定宽块级元素水平居中

最新推荐文章于 2018-10-19 15:48:53 发布

原创最新推荐文章于 2018-10-19 15:48:53 发布 · 359 阅读

0 ·

CC 4.0 BY-SA版权

CSS 专栏收录该内容

19 篇文章

订阅专栏

传统方法中，要让不定宽元素水平居中，我们一般采取以下结构：

<div class="more-btn1"><span>查看更多</span></div>

.more-btn1 {
    text-align: center;
}
.more-btn1 span {
    display: inline-block;
    padding: 0 30px;
    height: 40px;
    line-height: 40px;
    background: #4caf50;
    color: #fff;
    font-size: 14px;
    border-radius: 4px;
}

我们可通过使用 width: fit-content 属性来简化结构：

<div class="more-btn2">查看更多</div>

.more-btn2 {
    margin: 20px auto;
    padding: 0 30px;
    width: -webkit-fit-content;
    width: fit-content;/*宽度等于内容宽度*/
    height: 40px;
    line-height: 40px;
    background: #2b62a9;
    color: #fff;
    font-size: 14px;
    text-align: center;
    border-radius: 4px;
}