需求背景:
一开始使用 伪类元素 :after、:before,在伪类元素中放入背景图片~中间文字 “放心服务” 定宽,如 1.3rem, 但是移动端手机在适配的过程中,有时候1.3rem 不能满足有些机型,出现以下样式,
所以不能用这种方法,遇到过很多次啦~
改用不脱离文档流的形式,代码如下:
html:
<div class="title">
<div class="title-before-icon"></div>
<div class="title-text">放心服务</div>
<div class="title-after-icon"></div>
</div>
css:
.title {
display: flex; // 横着排列
margin: 0 auto; // 横向居中
width: max-content;
// 因为margin横向居中必须要设置宽度,但是又无法确定具体宽度,所以宽度就是内容的最大宽度
width: -webkit-max-content; // 兼容
width: -moz-max-content; // 兼容
}
.title-before-icon {
background: url('../../../../assets/common_image/titleLeftLine.png') no-repeat;
background-size: 100%;
width: 1.5rem;
height: 0.5rem;
display: block;
}
.title-after-icon {
background: url('../../../../assets/common_image/titleRightLine.png') no-repeat;
background-size: 100%;
width: 1.5rem;
height: 0.5rem;
display: block;
}
.title-text {
font-size: 0.32rem;
color: #FF572F;
margin: 0 0.1rem; // 文字与两边图片之间的间隔
}
以上all~
更多推荐
width:max-content 使用
发布评论