css实现移动端图片文字水平居中
网站建设 2023-01-28 21:38www.1681989.com免费网站
这样一个需求，第三方联合登陆的头像和昵称整体水平居中，如图
对于这样的需求，不能简单的对包含头像和昵称的div使用marg: 0 auto了，因为昵称的长度是未知的。
solution 1利用行内元素的paddg-left属性。把图片绝对定位到paddg-left区域内，然后对外层div元素设置文字居中，对span元素设置le-height，让文字垂直居中
XML/HTML Code复制内容到剪贴板
- <div class="contaer">
- <span class="wrap">
- <img src="pic-7.png" class="icon" alt="">
- Username
- </span>
- </div>
CSS Code复制内容到剪贴板
- .contaer {
- height: 10rem;
- text-align: center;
- background: #819121;
- }
- .wrap {
- display: le-block;
- position: relative;
- marg-: 3rem;
- paddg-left: 3rem;
- le-height: 2rem;
- background: #BB9391;
- }
- .icon {
- position: absolute;
- left: 0;
- : 0;
- height: 2rem;
- }
效果图
solution 2box布局居中，对div元素设置box-pack，span元素设置display: block，由于想偷懒，省略兼容模式写法
XML/HTML Code复制内容到剪贴板
- <div class="contaer">
- <img src="pic-7.png" class="icon" alt="">
- <span class="username">Username</span>
- /div>
CSS Code复制内容到剪贴板
- .contaer {
- display: -webkit-box;
- -webkit-box-pack: center;
- height: 10rem;
- background: #B2B2CD;
- }
- .icon {
- marg-: 2rem;
- height: 2rem;
- }
- .username {
- display: block;
- marg-: 2rem;
- paddg-left: 1rem;
- le-height: 2rem;
- }
效果图
点评solution 1会比较稳定，而solution 2易维护。
以上就是本文的全部内容，希望对大家的学习有所帮助。
原文