htmlcss圖片居中

lhyxcxy發表於2015-09-12
HTMLCSS

與其他一些display屬性類似，table-cell同樣會被其他一些CSS屬性破壞，例如float, position:absolute，所以，在使用display:table-cell與float:left或是position:absolute屬性儘量不用同用。設定了display:table-cell的元素對寬度高度敏感，對margin值無反應，響應padding屬性，基本上就是活脫脫的一個td標籤元素了

自己寫的一個，圖片上下居中需要建立兩個div 最外側div 需要引入 jz_out類  ，裡面div需要引入 jz_in類即可，相容 ie8，360等

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>無標題文件</title>
<!– 圖片上下居中需要建立兩個div 最外側div 需要引入 jz_out類  ，裡面div需要引入 jz_in類即可，相容 ie8，360等–>
<style >
.userinfo_editor {
position:absolute;
width: 1000px;
height: 800px;
border:ridge 1px red;
left: 0px;
top: 10px;
}
.jz_out{
    display: table;
}
.jz_in {
display: table-cell;
text-align: center;
vertical-align: middle;
background-color: #FFFFFF;

}
</style>
</head>
<body>
<div class=”userinfo_editor jz_out”>
    <div class=”jz_in” href=”#” target=”_blank”>
       <img src=”http://img01.taobaocdn.com/tps/i1/T1LeeNXodaXXXXXXXX-130-150.png”>sss</div>
    </div>
</div>
</body>
</html>

以下為網上搜的

方法一：利用定位

HTML結構如：

<div class="box">
    <a class="pic-wrap"
href="#" target="_blank">
        <img src="http://img01.taobaocdn.com/tps/i1/T1LeeNXodaXXXXXXXX-130-150.png">
    </a>
</div>

 CSS程式碼如：

body
{
    margin: 0;
    padding: 0;
    font: 12px/1.5 tahoma,arial;
}
.box
{
    width: 220px;
    height: 220px;
    border: 1px solid #F30;
    margin: 100px auto 0;
    display:
table;
}
.pic-wrap
{
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}
/*主要針對IE6、7的hack*/
.box
{
    *position: relative;
}
.pic-wrap
{
    *width: 100%;
    *position: absolute;
    *top: 50%;
    *left: 0;
    /*繼承自body的字型會影響到ie6，設定預設的windows系統字型*/
    _font-family: sans-serif;
}
.pic-wrap
img {
    *position: relative;
    *top: -50%;
    *left: 0;
    /*在ie中空文字節點有預設高度*/
    vertical-align: middle9;
    /*在ie中，a標籤中的img標籤預設有藍色邊框*/
    border: none9;
}

方法二：

HTML結構同上,

CSS程式碼如：

.box
{
    width: 220px;
    height: 220px;
    border: 1px solid #F30;
    margin: 100px auto 0;
}
.pic-wrap
{
    display: table-cell;
    vertical-align: middle;
    width: 220px;
    height: 220px;
    text-align: center;
    /*ie6、7不支援display:table-cell*/
    *display: block;
    *font-size: 192px; /*字型大小為height*0.783或者height/1.14,這裡約為192px*/
    _font-family: sans-serif; /*設定字型，否則在ie6下會有一個畫素的偏差*/
}
.pic-wrap
img {
    border: none;
    vertical-align: middle; /*由於ie下空文字節點有預設高度，所以設定*/      
}

【注意，當在css中設定了body元素字型的話，那麼方法二在ie7下會失效的】


最佳方法：

CSS程式碼如：

body
{
    margin: 0;
    padding: 0;
    font: 12px/1.5 tahoma,arial;
}
.box
{
    width: 220px;
    height: 220px;
    border: 1px solid #F30;
    margin: 100px auto 0;
}
.pic-wrap
{
    display: table-cell;
    vertical-align: middle;
    width: 220px;
    height: 220px;
    text-align: center;
    /*ie6、7不支援display:table-cell*/
    *display: block;
    _font-size: 192px;
    +line-height: 220px; /*設定ie7中空文字節點行高為220px*/
    _font-family: sans-serif;
}
.pic-wrap
img {
    border: none;
    vertical-align: middle9;/*由於ie中有預設高度的空文字節點*/
}


相關文章