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

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

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

<div > <span > <img src==alt=""> Username </span> </div> .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 > <img src==alt=""> <span >Username</span> </div> .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易维护。