传统方法中,要让不定宽元素水平居中,我们一般采取以下结构:
<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;
}
效果如下:
兼容考虑: