DIV CSS 佈局教程網

這篇文章主要為大家詳細介紹了CSS實現移動端圖片文字水平居中的方法，如何實現圖片以及文字的整體水平居中，本文為大家提供兩種解決辦法，感興趣的小伙伴們可以參考一下

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

對於這樣的需求，不能簡單的對包含頭像和昵稱的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易維護。

以上就是本文的全部內容，希望對大家的學習有所幫助。