北京赛车 pk10开奖记录_Toyou热购彩票官网
幫助文檔Help

css實現移動端圖片文字水平居中

一佰互聯網站制作(www.yinxi.net) 發布日期 2019-04-21 17:24:56 瀏覽數: 150

這樣一個需求弦煤,第三方聯合登陸的頭像和昵稱整體水平居中搐趕,如圖敝暮︰

對于這樣的需求奢乖箔,不能簡單的對包含頭像和昵稱的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-aligncenter;   
  4.     background#819121;   
  5. }   
  6. .wrap {   
  7.     displayinline-block;   
  8.     positionrelative;   
  9.     margin-top: 3rem;   
  10.     padding-left: 3rem;   
  11.     line-height: 2rem;   
  12.     background#BB9391;   
  13. }   
  14. .icon {   
  15.     positionabsolute;   
  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.     displayblock;   
  13.     margin-top: 2rem;   
  14.     padding-left: 1rem;   
  15.     line-height: 2rem;   
  16. }   

效果圖慶份︰

 

點評拭桃︰solution 1會比較穩定壇窪,而solution 2易維護合掛。

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

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

一佰互聯是全國知名建站品牌服務商,我們有九年網站建設極、網站制作計層暖、網頁設計街九、php開發和域名注冊及虛擬主機服務經驗低,提供的自助建站服務更是全國有名繼臍。近年來還整合團隊優勢自主開發了可視化多用戶”巔雲建站系統“3.0平台版榮,拖拽排版網站制作設計峽盛,輕松實現pc站啡聞 、手機微網站賭賀、小程序授狠、APP一體化全網營銷網站建設 奢啊,已成功的為全國上百家網絡公司提供自助建站平台搭建服務瓖爽稈。

相關新聞more

09
05月
網站建設必須做好seo基礎建設

其一庭兜,重于用戶體驗典。 我們應該放更多的精力在于用戶體驗上面佰浩艦,用戶體驗才是下一步我們的重心愛。不注重用戶體驗及佩,繼續的SEO優化和提升將是無源之水... >>詳情

25
05月
企業地區的企業網站優化的一些建議

第一次接觸網站優化的時候還是在運營的同事那里學的嘎稀,之後公司的網站需要優化乳,自己也慢慢的學習了相關的知識點.一個網站做好無非想通過線上讓別人了... >>詳情

29
04月
php 生成短網址原理及代碼

php 生成短網址 原理玩肆︰ 1.將原網址做crc32校驗賈當灤,得到校驗碼梯。 2.使用sprintf("%u") 將校驗碼轉為無符號數字喬。 3.對... >>詳情

01
11月
未來企業做網站呈現了怎樣的趨勢?

網站運營是指互聯網營銷中與網站的後期運作有關的工作枯滬呸。就當今的網絡發展趨勢錢勃感,網站的運營應當融入公司的整體經營體系中密,使互聯網與原有的機制結合卉,... >>詳情

高端網站建設

美工兼顧SEO無夾逼,為企業電子商務營銷助力!

電話屋︰

023-85725751
建站

產品

域名注冊 虛擬主機 雲服務器 企業郵局
智能建站 APP打包 微站/小程序 創業平台
網站推廣 媒體營銷 智能采集 AI機器人
400電話 短信營銷 店銷機器人
私人定制 門戶網站
热购彩票 热购彩票 pk10开奖