CSS讓高度不確定圖片垂直居中的幾種技巧
發(fā)布時間：2012-12-10 10:00:23 作者：佚名 
我要評論
我要評論在網(wǎng)頁設計過程中，有時候會希望圖片垂直居中的情況，而且，需要垂直居中的圖片的高度也不確定，這就會給頁面的布局帶來一定的挑戰(zhàn)，本文總結了一些實用方法，需要的朋友可以了解下
在網(wǎng)頁設計過程中，有時候會希望圖片垂直居中的情況。而且，需要垂直居中的圖片的高度也不確定，這就會給頁面的布局帶來一定的挑戰(zhàn)。下面總結了一下，曾經(jīng)使用過的幾種方法來使圖片垂直居中，除了第一種方法只限于標準瀏覽器外，另外兩種方法的兼容性還不錯。
方法一
將外部容器的顯示模式設置成display:table，這個設置的意思不用多說了吧… img標簽外部再嵌套一個span標簽，并設置span的顯示模式為display:table-cell，這樣span內部的內容就相當于表格，可以很方便的使用vertical-align屬性來對齊其中的內容了。
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>方法1 - 未知高度的圖片垂直居中 - www.nowamagic.net</title>
<style type="text/css">
body {
height:100%;
}
#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]-->
</head>
<body>
<div id="box">
<span><img src="images/demo_zl.png" alt="" /></span>
</div>
</body>
</html>
方法二
標準瀏覽器的情況還是和上面一樣，不同的是針對IE6/IE7利用在img標簽的前面插入一對空標簽的辦法。
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>方法2 - 未知高度的圖片垂直居中 - www.nowamagic.net</title>
<style type="text/css">
body {
height:100%;
}
#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]-->
</head>
<body>
<div id="box">
<i></i><img src="images/demo_zl.png" alt="" />
</div>
</body>
</html>
方法三
在img標簽外包裹一個p標簽，標準瀏覽器利用p標簽的偽類屬性:before來實現(xiàn)居中，另外，對于IE6/IE7使用了CSS表達式來實現(xiàn)兼容。
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>方法3 - 未知高度的圖片垂直居中 - www.nowamagic.net</title>
<style type="text/css">
body {
height:100%;
}
#box{
width:500px;height:400px;
text-align:center;
border:1px solid #d3d3d3;background:#fff;
}
#box p{
width:500px;height:400px;
line-height:400px; /* 行高等于高度 */
}
/* 兼容標準瀏覽器 */
#box p:before{
content:"."; /* 具體的值與垂直居中無關，盡可能的節(jié)省字符 */
margin-left:-5px; font-size:10px; /* 修復居中的小BUG */
visibility:hidden; /*設置成隱藏元素*/
}
#box p img{
*margin-top:expression((400 - this.height )/2); /* CSS表達式用來兼容IE6/IE7 */
vertical-align:middle;
border:1px solid #ccc;
}
</style>
</head>
<body>
<div id="box">
<p><img src="images/demo_zl.png" alt="" /></p>
</div>
</body>
</html>
方法一
將外部容器的顯示模式設置成display:table，這個設置的意思不用多說了吧… img標簽外部再嵌套一個span標簽，并設置span的顯示模式為display:table-cell，這樣span內部的內容就相當于表格，可以很方便的使用vertical-align屬性來對齊其中的內容了。
復制代碼
代碼如下:<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>方法1 - 未知高度的圖片垂直居中 - www.nowamagic.net</title>
<style type="text/css">
body {
height:100%;
}
#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]-->
</head>
<body>
<div id="box">
<span><img src="images/demo_zl.png" alt="" /></span>
</div>
</body>
</html>
方法二
標準瀏覽器的情況還是和上面一樣，不同的是針對IE6/IE7利用在img標簽的前面插入一對空標簽的辦法。
復制代碼
代碼如下:<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>方法2 - 未知高度的圖片垂直居中 - www.nowamagic.net</title>
<style type="text/css">
body {
height:100%;
}
#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]-->
</head>
<body>
<div id="box">
<i></i><img src="images/demo_zl.png" alt="" />
</div>
</body>
</html>
方法三
在img標簽外包裹一個p標簽，標準瀏覽器利用p標簽的偽類屬性:before來實現(xiàn)居中，另外，對于IE6/IE7使用了CSS表達式來實現(xiàn)兼容。
復制代碼
代碼如下:<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>方法3 - 未知高度的圖片垂直居中 - www.nowamagic.net</title>
<style type="text/css">
body {
height:100%;
}
#box{
width:500px;height:400px;
text-align:center;
border:1px solid #d3d3d3;background:#fff;
}
#box p{
width:500px;height:400px;
line-height:400px; /* 行高等于高度 */
}
/* 兼容標準瀏覽器 */
#box p:before{
content:"."; /* 具體的值與垂直居中無關，盡可能的節(jié)省字符 */
margin-left:-5px; font-size:10px; /* 修復居中的小BUG */
visibility:hidden; /*設置成隱藏元素*/
}
#box p img{
*margin-top:expression((400 - this.height )/2); /* CSS表達式用來兼容IE6/IE7 */
vertical-align:middle;
border:1px solid #ccc;
}
</style>
</head>
<body>
<div id="box">
<p><img src="images/demo_zl.png" alt="" /></p>
</div>
</body>
</html>
相關文章
純CSS定位的固定垂直居中浮動層代碼，附經(jīng)典解說 《詳解定位與定位應用
關于在html中浮動層是眾多網(wǎng)頁愛好者剛開始的難點，主要在于定位。如果你對CSS定位還不夠了解 可以接著往下看，運行里面的內容即可。 【需求】： 將一個網(wǎng)頁分成頭、身2009-07-01- 如題，用html，css如何實現(xiàn)垂直居中。水平居中我們知道最簡便的方法就是margin:auto，但是margin只是相對寬度有效。2010-03-18
用CSS讓img input select button 圖片,文本框,下拉菜單,按扭垂直居中的
一直以來,在HTML中,img input select button 這里元素，垂直對齊,比較難。結果我長大了。我發(fā)現(xiàn)了一個現(xiàn)像，其實解決這些問題只是一句話的事。2011-03-08CSS垂直居中網(wǎng)頁布局實現(xiàn)的5種方法
網(wǎng)頁制作Webjx文章簡介：利用 CSS 來實現(xiàn)對象的垂直居中有許多不同的方法，比較難的是選擇那個正確的方法。我下面說明一下我看到的好的方法和怎么來創(chuàng)建一個好的居中網(wǎng)站。2009-04-02- 用過 Fireworks / PhotoShop 的人應該都知道，在畫布中將一個頁面模塊居中是多容易的事，可如果是垂直居中，前端就苦逼了2011-10-30
- 全屏垂直居中的一個辦法 DIV+CSS , 這個方面有一點不好， 就是不能自動適應，必須把高和寬寫死！2011-10-07
- 寬度自適應：就是元素的寬度根居里面的內容來變化2012-06-14
- 盡管有CSS的vertical-align特性，但是并不能有效解決未知高度的垂直居中問題（在一個DIV標簽里有未知高度的文本或圖片的情況下）。2010-06-06
- 圖片的寬度和高度是未知的，沒有一個固定的尺寸，在這個前提下要使圖片在一個固定了寬度和高度的容器中垂直居中，想想感覺還是挺麻煩的，由于最近的項目可能會用到這個方案2010-12-18
- 最近上網(wǎng)上找了些關于CSS實現(xiàn)垂直居中的方法，方法挺多，下面就我看到的幾種好方法在這里說明一下，使用 CSS 實現(xiàn)垂直居中并不容易。2011-09-05