網站首頁 網站建設 公司動態 行業新聞 案例展示 關于我們

文章內容

圖片垂直居中的使用技巧(轉載)

日期:2013-12-09  來源:攀枝花惠康網絡公司

轉載自己http://www.planabc.net/2008/05/26/img_vertical_center_solution/

123456789101112131415161718192021 .box {/*非IE的主流瀏覽器識此外垂直居中的體例*/display: table-cell;vertical-align:middle;/*設置水平居中*/text-align:center;/* 針對IE的Hack */*display: block;*font-size: 175px;/*約為高度的0.873,200*0.873 約為175*/*font-family:Arial;/*防止非utf-8引起的hack失蹤效問題,如gbk編碼*/width:200px;height:200px;border: 1px solid #eee;}.box img {/*設置圖片垂直居中*/vertical-align:middle;}<div class="box"><img src="http://pics.taobao.com/bao/album/promotion/taoscars_180x95_071112_sr.jpg" /></div>

“使用純CSS實現未知尺寸的圖片(但高寬都小于200px)在200px的正方形容器中水安然安祥垂直居中?!?/p>

當然出題并不是隨意,而是有其現實的原因,垂直居中是 淘寶 工作中最常碰著的一個問題,很有代表性。

至于若何解決,下面是一個權衡的相對結構清潔,CSS簡單的解決體例:

問題問題的可貴在于兩點:

  1. 垂直居中;
  2. 圖片是個置換元素,有些非凡的特征。

當然還有其他的解決體例,在此不深究,有樂趣的可以閱讀下:

  • 《Vertical centering using CSS》
  • 《Vertical centering using CSS》(問題和上同,內容分歧)
  • 《CSS List Grid Layout》

文章來源:攀枝花惠康網絡公司

惠康網絡,是一家專業從事攀枝花網站建設,攀枝花網站制作,攀枝花網站設計公司,提供網站建設一條龍服務(網站域名注冊+網站服務器租用+網站開發+網站維護+網站營銷推廣),惠康網絡立足攀枝花,輻射全中國,攀枝花惠康網絡的客戶已經遍布國內各地大中小城市,我們高效優質的網站建設服務深受用戶好評。

客服熱線:tel(謝先生)  客服QQ:1323605005  
服務郵箱:[email protected](售前咨詢)  [email protected](技術部)  [email protected](售后服務)
公司地址:四川省攀枝花市
郵編:617200

青海十一选五开奖图