圖片文字水平居中（移動端）

這樣一個需求，第三方聯合登陸的頭像和昵稱整體水平居中，如圖：

對於這樣的需求，不能簡單的對包含頭像和昵稱的div使用margin: 0 auto了，因為昵稱的長度是未知的。

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>
.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>
.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易維護。