網(wǎng)頁(yè)前端開(kāi)發(fā)-未知高度的圖片垂直居中
圖片的寬度和高度是未知的,沒(méi)有固定的尺寸,在這個(gè)前提下要使圖片在一個(gè)固定了寬度和高度的容器中垂直居中。最近的在做的項(xiàng)目就有這個(gè)需求,所以先把一些常用的方法都收集整理了一下。
下圖是理想中的效果圖,外部容器的寬度和高度固定,中間的圖片寬度和高度未知,但是圖片要始終要相對(duì)于外部的容器垂直居中。
但是實(shí)際在瀏覽器中實(shí)現(xiàn)起來(lái)的效果并不是很完美,由于各瀏覽器的解析都各不相同,所以在各瀏覽器都會(huì)有1px-3px的偏差。
方法一:
該方法是將外部容器的顯示模式設(shè)置成display:table,img標(biāo)簽外部再嵌套一個(gè)span標(biāo)簽,并設(shè)置span的顯示模式為display:table-cell,這樣就可以很方便的使用vertical-align象表格元素那樣對(duì)齊了,當(dāng)然這只是在標(biāo)準(zhǔn)瀏覽器下,IE6/IE7還得使用定位。
HTML結(jié)構(gòu)部分:
<div id="box"> <span><img src="images/demo.jpg" alt="" /></span> </div>
CSS樣式部分:
<style type="text/css">? #box{ width:500px;height:400px; display:table; text-align:center; border:1px solid #d3d3d3;background:#fff; } #box span{ display:table-cell; vertical-align:middle; } #box img{ border:1px solid #ccc; } </style> <!--[if lte IE 7]> <style type="text/css">? #box{ position:relative; overflow:hidden; } #box span{ position:absolute; left:50%;top:50%; } #box img{ position:relative; left:-50%;top:-50%; } </style> <![endif]-->
方法二:
方法二和方法一的實(shí)現(xiàn)的原理大同小異,結(jié)構(gòu)也是相同的,方法一用的是條件注釋,方法二就用的CSS Hack。
CSS樣式部分:
<style type="text/css">? #box{ width:500px;height:400px; overflow:hidden; position:relative; display:table-cell; text-align:center; vertical-align:middle; border:1px solid #d3d3d3;background:#fff; } #box span{ position:static; *position:absolute; /*針對(duì)IE6/7的Hack*/ top:50%; /*針對(duì)IE6/7的Hack*/ } #box img { position:static; *position:relative; /*針對(duì)IE6/7的Hack*/ top:-50%;left:-50%; /*針對(duì)IE6/7的Hack*/ border:1px solid #ccc; } </style>
該方法有個(gè)弊端,在標(biāo)準(zhǔn)瀏覽器下由于外部容器#box的顯示模式為display:table-cell,所以導(dǎo)致#box無(wú)法使用margin屬性,并且在IE8下設(shè)置邊框也無(wú)效。
方法三:
標(biāo)準(zhǔn)瀏覽器還是將外部容器#box的顯示模式設(shè)置為display:table-cell,IE6/IE7是利用在img標(biāo)簽的前面插入一對(duì)空標(biāo)簽的辦法。
HTML結(jié)構(gòu)部分:
<div id="box"> <i></i><img src="images/demo.jpg" alt="" /> </div>?
CSS樣式部分:
<style type="text/css">? #box{ width:500px;height:400px; display:table-cell; text-align:center; vertical-align:middle; border:1px solid #d3d3d3;background:#fff; } #box img{ border:1px solid #ccc; } </style> <!--[if IE]> <style type="text/css">? #box i { display:inline-block; height:100%; vertical-align:middle } #box img { vertical-align:middle } </style> <![endif]-->
方法四:
在img標(biāo)簽外包裹一個(gè)p標(biāo)簽,標(biāo)準(zhǔn)瀏覽器利用p標(biāo)簽的偽類屬性:before來(lái)實(shí)現(xiàn),IE6/IE7使用了CSS表達(dá)式來(lái)實(shí)現(xiàn)兼容。
HTML結(jié)構(gòu)部分:
<div id="box"> <p><img src="images/demo.jpg" alt="" /></p> </div>
CSS樣式部分:
#box{ width:500px;height:400px; text-align:center; border:1px solid #d3d3d3;background:#fff; } #box p{ width:500px;height:400px; line-height:400px; /* 行高等于高度 */ } /* 兼容標(biāo)準(zhǔn)瀏覽器 */ #box p:before{ content:"."; /* 具體的值與垂直居中無(wú)關(guān),盡可能的節(jié)省字符 */ margin-left:-5px; font-size:10px; /* 修復(fù)居中的小BUG */ visibility:hidden; /*設(shè)置成隱藏元素*/ } #box p img{ *margin-top:expression((400 - this.height )/2); /* CSS表達(dá)式用來(lái)兼容IE6/IE7 */ vertical-align:middle; border:1px solid #ccc; }
使用:beforr這個(gè)方法對(duì)于標(biāo)準(zhǔn)瀏覽器來(lái)說(shuō)比較給力,也沒(méi)發(fā)現(xiàn)有副作用,但是對(duì)于IE6/IE7,如果對(duì)性能要求較高的話CSS表達(dá)式的方法要慎用。
方法五:
該方法針對(duì)IE6/IE7,將圖片外部容器的字體大小設(shè)置成高度的0.873倍就可以實(shí)現(xiàn)居中,標(biāo)準(zhǔn)瀏覽器還是使用上面的方法來(lái)實(shí)現(xiàn)兼容,并且結(jié)構(gòu)也是比較優(yōu)雅。
HTML結(jié)構(gòu)部分:
<div id="box"> <img src="images/demo.jpg" alt="" /> </div>
CSS樣式部分:
#box{ width:500px;height:400px; text-align:center; border:1px solid #d3d3d3;background:#fff; /* 兼容標(biāo)準(zhǔn)瀏覽器 */ display: table-cell; vertical-align:middle; /* 兼容IE6/IE7 */ *display:block; *font-size:349px; /* 字體大小約為容器高度的0.873倍 400*0.873 = 349 */ *font-family:Arial; /* 防止非utf-8引起的hack失效問(wèn)題,如gbk編碼 */ } #box img{ vertical-align:middle; }
設(shè)置字體大小的方法感覺(jué)比較怪異,也沒(méi)有看到一個(gè)合理的解釋,只知道圖片元素有一些不同于其他元素的特性,但是對(duì)于IE6/IE7來(lái)說(shuō),這個(gè)方法還是比較給力的。
思考:很多方法都是依賴于將外部容器的顯示模式設(shè)置成table才能實(shí)現(xiàn)垂直居中,也就是div來(lái)模擬table,如果CSS有一個(gè)屬性來(lái)實(shí)現(xiàn)這種效果那該多好。
本文地址:http://m.pkvc.cn/tutorial/wd1502.html
您可能還喜歡
- jquery Jcrop圖像裁切插件中文api文檔
- @media適配不同尺寸的手機(jī)
- 返回上一頁(yè)代碼的幾種寫(xiě)法
- Dreamweaver CC 2014新功能介紹
- 深入了解viewport和px
- 優(yōu)秀CSS代碼書(shū)寫(xiě)的10個(gè)規(guī)范
- 畫(huà)出你的風(fēng)格:HTML5創(chuàng)意畫(huà)板的設(shè)計(jì)教程
- Div中height:100%無(wú)效的解決辦法
- 網(wǎng)頁(yè)前端-網(wǎng)頁(yè)切圖命名規(guī)范
- 為網(wǎng)頁(yè)設(shè)計(jì)師而生的14個(gè)文本編輯器
- 專訪:石墨文檔產(chǎn)品總監(jiān)羅穎
- UI設(shè)計(jì)不得不知的移動(dòng)端UI尺寸適
- 光音移動(dòng)設(shè)計(jì)規(guī)范 — 表單類
- 體驗(yàn)設(shè)計(jì)中的排序問(wèn)題
- 網(wǎng)頁(yè)設(shè)計(jì)精粹 網(wǎng)頁(yè)中那些迷人的按
- aliued:響應(yīng)式設(shè)計(jì)的現(xiàn)狀與趨勢(shì)
- 10個(gè)智能對(duì)象處理的ps技巧
- 網(wǎng)頁(yè)UI - 原子設(shè)計(jì)理論(上)
- 如何通過(guò)設(shè)計(jì)提升banner點(diǎn)擊率?
- 晉小彥視覺(jué)設(shè)計(jì)系列文章(二):全屏