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

三種方法介紹
服務器君一共花費了260.773 ms進行了4次數據庫查詢,努力地為您提供了這個頁面。
試試閱讀模式?希望聽取您的建議

在網頁設計過程中,有時候會希望圖片垂直居中的情況。而且,需要垂直居中的圖片的高度也不確定,這就會給頁面的布局帶來一定的挑戰。下面總結了一下,曾經使用過的幾種方法來使圖片垂直居中,除了第一種方法只限于標準瀏覽器外,另外兩種方法的兼容性還不錯。

方法一

將外部容器的顯示模式設置成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.snpmgr.live</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.snpmgr.live</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.snpmgr.live</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>

本文地址:http://www.snpmgr.live/librarys/veda/detail/1950,歡迎訪問原出處。

不打個分嗎?

轉載隨意,但請帶上本文地址:

http://www.snpmgr.live/librarys/veda/detail/1950

如果你認為這篇文章值得更多人閱讀,歡迎使用下面的分享功能。
小提示:您可以按快捷鍵 Ctrl + D,或點此 加入收藏

閱讀一百本計算機著作吧,少年

很多人覺得自己技術進步很慢,學習效率低,我覺得一個重要原因是看的書少了。多少是多呢?起碼得看3、4、5、6米吧。給個具體的數量,那就100本書吧。很多人知識結構不好而且不系統,因為在特定領域有一個足夠量的知識量+足夠良好的知識結構,系統化以后就足以應對大量未曾遇到過的問題。

奉勸自學者:構建特定領域的知識結構體系的路徑中再也沒有比學習該專業的專業課程更好的了。如果我的知識結構體系足以囊括面試官的大部分甚至吞并他的知識結構體系的話,讀到他言語中的一個詞我們就已經知道他要表達什么,我們可以讓他坐“上位”畢竟他是面試官,但是在知識結構體系以及心理上我們就居高臨下。

所以,閱讀一百本計算機著作吧,少年!

《代碼整潔之道》 馬丁(Robert C. Martin) (作者), 韓磊 (譯者)

軟件質量,不但依賴于架構及項目管理,而且與代碼質量緊密相關。這一點,無論是敏捷開發流派還是傳統開發流派,都不得不承認。《代碼整潔之道》提出一種觀念:代碼質量與其整潔度成正比。干凈的代碼,既在質量上較為可靠,也為后期維護、升級奠定了良好基礎。作為編程領域的佼佼者,《代碼整潔之道》作者給出了一系列行之有效的整潔代碼操作實踐。這些實踐在《代碼整潔之道》中體現為一條條規則(或稱“啟示”),并輔以來自現實項目的正、反兩面的范例。只要遵循這些規則,就能編寫出干凈的代碼,從而有效提升代碼質量。

更多計算機寶庫...

燃烧吧足球登陆