css实现移动端图片文字水平居中

前端  /  管理员 发布于 7年前   226

这样一个需求，第三方联合登陆的头像和昵称整体水平居中，如图：

对于这样的需求，不能简单的对包含头像和昵称的div使用margin: 0 auto了，因为昵称的长度是未知的。

solution 1：利用行内元素的padding-left属性。把图片绝对定位到padding-left区域内，然后对外层div元素设置文字居中，对span元素设置line-height，让文字垂直居中

XML/HTML Code复制内容到剪贴板

1. <div class="container">  
2.     <span class="wrap">  
3.         <img src="pic-7.png" class="icon" alt="">  
4.     Username   
5.     </span>  
6. </div>  

CSS Code复制内容到剪贴板

1. .container {   
2.     height: 10rem;   
3.     text-align: center;   
4.     background: #819121;   
5. }   
6. .wrap {   
7.     display: inline-block;   
8.     position: relative;   
9.     margin-top: 3rem;   
10.     padding-left: 3rem;   
11.     line-height: 2rem;   
12.     background: #BB9391;   
13. }   
14. .icon {   
15.     position: absolute;   
16.     left: 0;   
17.     top: 0;   
18.     height: 2rem;   
19. }   

效果图：

 

solution 2：box布局居中，对div元素设置box-pack，span元素设置display: block，由于想偷懒，省略兼容模式写法

XML/HTML Code复制内容到剪贴板

1. <div class="container">  
2.    <img src="pic-7.png" class="icon" alt="">  
3.    <span class="username">Username</span>  
4. /div>  

CSS Code复制内容到剪贴板

1. .container {   
2.     display: -webkit-box;   
3.     -webkit-box-pack: center;   
4.     height: 10rem;   
5.     background: #B2B2CD;   
6. }   
7. .icon {   
8.     margin-top: 2rem;   
9.     height: 2rem;   
10. }   
11. .username {   
12.     display: block;   
13.     margin-top: 2rem;   
14.     padding-left: 1rem;   
15.     line-height: 2rem;   
16. }   

效果图：

 

点评：solution 1会比较稳定，而solution 2易维护。

以上就是本文的全部内容，希望对大家的学习有所帮助。

原文：http://www.cnblogs.com/hupan508/p/5191836.html