css中怎么实现移动端图片文字水平居中,相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。
solution 1:利用行内元素的padding-left属性。把图片绝对定位到padding-left区域内,然后对外层div元素设置文字居中,对span元素设置line-height,让文字垂直居中
<div class="container">
<span class="wrap">
<img src="pic-7.png" class="icon" alt="">
Username
</span>
</div>
CSS Code复制内容到剪贴板
.container {
height: 10rem;
text-align: center;
background: #819121;
}
.wrap {
display: inline-block;
position: relative;
margin-top: 3rem;
padding-left: 3rem;
line-height: 2rem;
background: #BB9391;
}
.icon {
position: absolute;
left: 0;
top: 0;
height: 2rem;
}
效果图:
solution 2:box布局居中,对div元素设置box-pack,span元素设置display: block,由于想偷懒,省略兼容模式写法
<div class="container">
<img src="pic-7.png" class="icon" alt="">
<span class="username">Username</span>
/div>
CSS Code复制内容到剪贴板
.container {
display: -webkit-box;
-webkit-box-pack: center;
height: 10rem;
background: #B2B2CD;
}
.icon {
margin-top: 2rem;
height: 2rem;
}
.username {
display: block;
margin-top: 2rem;
padding-left: 1rem;
line-height: 2rem;
}
效果图:
看完上述内容,你们掌握css中怎么实现移动端图片文字水平居中的方法了吗?如果还想学到更多技能或想了解更多相关内容,欢迎关注亿速云行业资讯频道,感谢各位的阅读!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。