溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

CSS讓圖片垂直居中的幾種技巧

發(fā)布時(shí)間：2020-06-15 11:21:05 來源：網(wǎng)絡(luò) 閱讀：816 作者：gutaotao1989 欄目：開發(fā)技術(shù)

在網(wǎng)頁設(shè)計(jì)過程中，有時(shí)候會(huì)希望圖片垂直居中的情況。而且，需要垂直居中的圖片的高度也不確定，這就會(huì)給頁面的布局帶來一定的挑戰(zhàn)。下面總結(jié)了一下，曾經(jīng)使用過的幾種方法來使圖片垂直居中，除了第一種方法只限于標(biāo)準(zhǔn)瀏覽器外，另外兩種方法的兼容性還不錯(cuò)。


方法一

將外部容器的顯示模式設(shè)置成display:table，這個(gè)設(shè)置的意思不用多說了吧… img標(biāo)簽外部再嵌套一個(gè)span標(biāo)簽，并設(shè)置span的顯示模式為display:table-cell，這樣span內(nèi)部的內(nèi)容就相當(dāng)于表格，可以很方便的使用vertical-align屬性來對齊其中的內(nèi)容了。

<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="p_w_picpaths/demo_zl.png" alt="" /></span>
</div>
</body>
</html>

方法二

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

<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="p_w_picpaths/demo_zl.png" alt="" />
</div>
</body>
</html>

方法三

在img標(biāo)簽外包裹一個(gè)p標(biāo)簽，標(biāo)準(zhǔn)瀏覽器利用p標(biāo)簽的偽類屬性:before來實(shí)現(xiàn)居中，另外，對于IE6/IE7使用了CSS表達(dá)式來實(shí)現(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;  /* 行高等于高度 */
}
/* 兼容標(biāo)準(zhǔn)瀏覽器 */
#box p:before{
content:".";  /* 具體的值與垂直居中無關(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á)式用來兼容IE6/IE7 */
vertical-align:middle;
border:1px solid #ccc;
}
</style>
</head>
<body>
<div id="box">
<p><img src="p_w_picpaths/demo_zl.png" alt="" /></p>
</div>
</body>
</html>
向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手