未知寬高圖片垂直居中的三種方法

NO IMAGE
1 Star2 Stars3 Stars4 Stars5 Stars 給文章打分!
Loading...

方法一:

將外部容器的顯示模式設定成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.cleanthem.com</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.cleanthem.com</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來實現居中,另外,對於IE6/IE7使用了CSS表示式來實現相容。

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>方法3 - 未知高度的圖片垂直居中 - www.cleanthem.com</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:".";  /* 具體的值與垂直居中無關,儘可能的節省字元 */
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>

以下是已知寬高的圖片垂直居中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        #container{
            width: 1000px;
            height: 800px;
            border: 2px solid green;
            background: #BECECB;
            margin: 0 auto;
        }
 
        img{
            height: 480px;
            width: 320px;
            position: absolute;     /* 絕對定位 */
            top: 50%;                /* 距離頂部為50% */
            left: 50%;                /* 距離左邊部為50% */
            margin: -240px -160px;    /* 減去自身的高度與寬度 */
 
        }
 
    </style>
</head>
<body>
    <div id="container">
        <img src="ccc.jpg" alt="ccc"  />
    </div>
</body>
</html>

相關文章

程式語言 最新文章