css實現(xiàn)移動端圖片文字水平居中
發(fā)布時間：2016-03-11 10:18:15 作者：hupan508 
我要評論
我要評論這篇文章主要為大家詳細(xì)介紹了css實現(xiàn)移動端圖片文字水平居中的方法，如何實現(xiàn)圖片以及文字的整體水平居中，本文為大家提供兩種解決辦法，感興趣的小伙伴們可以參考一下
這樣一個需求，第三方聯(lián)合登陸的頭像和昵稱整體水平居中，如圖：
對于這樣的需求，不能簡單的對包含頭像和昵稱的div使用margin: 0 auto了，因為昵稱的長度是未知的。
solution 1：利用行內(nèi)元素的padding-left屬性。把圖片絕對定位到padding-left區(qū)域內(nèi)，然后對外層div元素設(shè)置文字居中，對span元素設(shè)置line-height，讓文字垂直居中
XML/HTML Code復(fù)制內(nèi)容到剪貼板
- <div class="container">
- <span class="wrap">
- <img src="pic-7.png" class="icon" alt="">
- Username
- </span>
- </div>
CSS Code復(fù)制內(nèi)容到剪貼板
- .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元素設(shè)置box-pack，span元素設(shè)置display: block，由于想偷懶，省略兼容模式寫法
XML/HTML Code復(fù)制內(nèi)容到剪貼板
- <div class="container">
- <img src="pic-7.png" class="icon" alt="">
- <span class="username">Username</span>
- /div>
CSS Code復(fù)制內(nèi)容到剪貼板
- .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會比較穩(wěn)定，而solution 2易維護。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助。
原文：http://www.cnblogs.com/hupan508/p/5191836.html
相關(guān)文章
- 下面小編就為大家?guī)硪黄猚ss水平居中的各種方法總結(jié)(推薦)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-06-03
- 下面小編就為大家?guī)硪黄獪\析CSS實現(xiàn)水平垂直同時居中的5種思路。小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考，一起跟隨小編過來看看吧2016-04-28
- 水平居中是經(jīng)常遇到的問題?？此品椒ㄝ^多，條條大路通羅馬。但系統(tǒng)梳理下，其實都圍繞著幾個思路展開。本文將介紹關(guān)于水平居中的4種思路，感興趣的朋友參考下吧2016-04-27
- 這篇文章主要介紹了css三種實現(xiàn)div在瀏覽器水平居中的方法，感興趣的小伙伴們可以參考一下2016-04-14
- 這篇文章主要為大家詳細(xì)介紹了css使用flexbox布局容器內(nèi)多元素水平居中的方法，如何使用flexbox布局多元素水平居中？本文為大家進(jìn)行解答，感興趣的小伙伴們可以參考一下2016-03-17
- 下面小編就為大家?guī)硪黄P(guān)于css水平居中的小小探討。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-06-29