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

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

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

XML/HTML Code复制内容到剪贴板 <divclass="container"> <spanclass="wrap"> <imgsrc="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，由于想偷懒，省略兼容模式写法

XML/HTML Code复制内容到剪贴板 <divclass="container"> <imgsrc="pic-7.png"class="icon"alt=""> <spanclass="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; }

效果图：

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

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

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