亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

css實(shí)現(xiàn)移動(dòng)端圖片文字水平居中

  發(fā)布時(shí)間：2016-03-11 10:18:15   作者：hupan508   我要評(píng)論
這篇文章主要為大家詳細(xì)介紹了css實(shí)現(xiàn)移動(dòng)端圖片文字水平居中的方法，如何實(shí)現(xiàn)圖片以及文字的整體水平居中，本文為大家提供兩種解決辦法，感興趣的小伙伴們可以參考一下

這樣一個(gè)需求，第三方聯(lián)合登陸的頭像和昵稱(chēng)整體水平居中，如圖：

對(duì)于這樣的需求，不能簡(jiǎn)單的對(duì)包含頭像和昵稱(chēng)的div使用margin: 0 auto了，因?yàn)殛欠Q(chēng)的長(zhǎng)度是未知的。

solution 1：利用行內(nèi)元素的padding-left屬性。把圖片絕對(duì)定位到padding-left區(qū)域內(nèi)，然后對(duì)外層div元素設(shè)置文字居中，對(duì)span元素設(shè)置line-height，讓文字垂直居中

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  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復(fù)制內(nèi)容到剪貼板
  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布局居中，對(duì)div元素設(shè)置box-pack，span元素設(shè)置display: block，由于想偷懶，省略兼容模式寫(xiě)法

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. <div class="container">  
  2.    <img src="pic-7.png" class="icon" alt="">  
  3.    <span class="username">Username</span>  
  4. /div>  
CSS Code復(fù)制內(nèi)容到剪貼板
  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. }   

效果圖：

 

點(diǎn)評(píng)：solution 1會(huì)比較穩(wěn)定，而solution 2易維護(hù)。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助。

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

相關(guān)文章

  • css水平居中的各種方法總結(jié)(推薦)

    下面小編就為大家?guī)?lái)一篇css水平居中的各種方法總結(jié)(推薦)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2016-06-03

  • 淺析CSS實(shí)現(xiàn)水平垂直同時(shí)居中的5種思路

    下面小編就為大家?guī)?lái)一篇淺析CSS實(shí)現(xiàn)水平垂直同時(shí)居中的5種思路。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考，一起跟隨小編過(guò)來(lái)看看吧
    2016-04-28

  • CSS實(shí)現(xiàn)水平居中的4種思路簡(jiǎn)要概述

    水平居中是經(jīng)常遇到的問(wèn)題?？此品椒ㄝ^多，條條大路通羅馬。但系統(tǒng)梳理下，其實(shí)都圍繞著幾個(gè)思路展開(kāi)。本文將介紹關(guān)于水平居中的4種思路，感興趣的朋友參考下吧
    2016-04-27

  • css三種方法實(shí)現(xiàn)div在瀏覽器水平居中

    這篇文章主要介紹了css三種實(shí)現(xiàn)div在瀏覽器水平居中的方法，感興趣的小伙伴們可以參考一下
    2016-04-14

  • css使用flexbox布局容器內(nèi)多元素水平居中

    這篇文章主要為大家詳細(xì)介紹了css使用flexbox布局容器內(nèi)多元素水平居中的方法，如何使用flexbox布局多元素水平居中？本文為大家進(jìn)行解答，感興趣的小伙伴們可以參考一下
    2016-03-17

  • 關(guān)于css水平居中的小小探討

    下面小編就為大家?guī)?lái)一篇關(guān)于css水平居中的小小探討。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2016-06-29

最新評(píng)論