任意圖片實(shí)現(xiàn)垂直居中的三種方法(兼容性還不錯(cuò))

2024-07-11 08:28:19

字體：大中小

供稿：網(wǎng)友

在網(wǎng)站開(kāi)發(fā)過(guò)程中，可能會(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 - 未知高度的圖片垂直居中</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=utf-8" />
<title>方法2 - 未知高度的圖片垂直居中</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="logo.png" alt="" />
</div>
</body>
</html>

上一篇：讓IE6支持important的注意事項(xiàng)

下一篇：Hack 只針對(duì)IE的寫(xiě)法

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

共有條評(píng)論