2

我有這段代碼在兩條水平線之間居中放置一個圖像。在IE中的兩行之間居中一個圖像

CSS:

.line-scale-left { 
    position: absolute; 
    background-color: #000000; 
    border: #000000; 
    height: 4px; 
    top:190px; 
    width: 25%; 
    left: 250px; 
} 

.line-scale-right { 
    position: absolute; 
    background-color: #000000; 
    border: #000000; 
    height: 4px; 
    top:190px; 
    width: 25%; 
    right: 250px; 
} 

.center-img { 
    display:block; 
    margin-left:auto; 
    margin-right:auto;} 
} 

的HTML代碼看起來像這樣<hr class="line-scale-left" /><img src="http://fleminglaw.biz/balance.gif" align="center" class="center-img" width="82px" height="61px" /><hr class="line-scale-right" />

現在,我已經在各種分辨率看着頁面上的多個屏幕,它已經走出了罰款所有的臺式機和我已經看到了筆記本電腦的一個問題,即最小化時遇到的問題。

它在所有瀏覽器中都可以正常工作,除了IE 8和9以外,行和頁面的其餘部分看起來都很好,除非我無法在IE中獲得此圖像,並且兼容性視圖無法幫助或改變它一點。

有人可以幫助一個noob出來告訴我如何讓圖像在IE中居中。

+0

我想幫忙,但是你可以把你的代碼放在http://jsfiddle.net/? – airportyh

+0

當然沒問題。 [這是它的鏈接](http://jsfiddle.net/fpxVM/)。它在JSfiddle中表現不正確,因爲頁面顯示的屏幕很小,這對移動網站也是一個問題,並且在最小化時會出現問題,但我會稍後再解決。在這一點上,我真的很喜歡這個圖像集中並且在所有最大化的瀏覽器中都很好看。 – Jem

回答

1

如果您需要將它放在其他位置,請將其包含在包含div中。

.line-scale-left{ 
    float: left; 
    width: 25%; 
    margin-top: 30px; 
} 

.line-scale-right{ 
    width: 25%; 
    float: left; 
    margin-top: 30px; 
} 

.center-img{  
    display:block; 
    float: left; 
} 
相關問題