CSS讓高度不確定圖片垂直居中的幾種技巧

2024-07-11 08:29:24

字體：大中小

供稿：網(wǎng)友

在網(wǎng)頁(yè)設(shè)計(jì)過(guò)程中，有時(shí)候會(huì)希望圖片垂直居中的情況。而且，需要垂直居中的圖片的高度也不確定，這就會(huì)給頁(yè)面的布局帶來(lái)一定的挑戰(zhàn)。下面總結(jié)了一下，曾經(jīng)使用過(guò)的幾種方法來(lái)使圖片垂直居中，除了第一種方法只限于標(biāo)準(zhǔn)瀏覽器外，另外兩種方法的兼容性還不錯(cuò)。
方法一
將外部容器的顯示模式設(shè)置成display:table，這個(gè)設(shè)置的意思不用多說(shuō)了吧… img標(biāo)簽外部再嵌套一個(gè)span標(biāo)簽，并設(shè)置span的顯示模式為display:table-cell，這樣span內(nèi)部的內(nèi)容就相當(dāng)于表格，可以很方便的使用vertical-align屬性來(lái)對(duì)齊其中的內(nèi)容了。

復(fù)制代碼

代碼如下:
<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>

</head>
<body>
<div id="box">
<span><img src="images/demo_zl.png" alt="" /></span>
</div>
</body>
</html>

方法二
標(biāo)準(zhǔn)瀏覽器的情況還是和上面一樣，不同的是針對(duì)IE6/IE7利用在img標(biāo)簽的前面插入一對(duì)空標(biāo)簽的辦法。

復(fù)制代碼

代碼如下:
<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>

</head>
<body>
<div id="box">
<i></i><img src="images/demo_zl.png" alt="" />
</div>
</body>
</html>

上一篇：IE6支持!important嗎如何用!important解決瀏覽器兼容性問(wèn)題

下一篇：關(guān)于CSS中的display:table-cell使用技巧的幾種應(yīng)用

發(fā)表評(píng)論

共有條評(píng)論