水平圖像對齊CSS

我在對齊主圖像時遇到了一些麻煩。它應該水平居中對齊，然後繼續沿着整個地方。該頁面可以在這裏http://0034.eu/propmanager/水平圖像對齊CSS

<img src="images/background-space.png" class="displayed" border="0" /> 

IMG.displayed{ 
    display: inline-block; 
    margin-left: auto; 
    margin-right: auto; 
}

發現，基本上我已經應用到圖像的CSS，所有的源代碼是關於主index.html的（沒有單獨的樣式表）。

來源

2013-07-09 Brad Adams

添加'width'屬性，那麼它會工作 – slash197

很抱歉，但無法與域相關的了，它的鏈接可能無法正常工作 –

添加display: block;

img.displayed{ 
    display: block; 
    margin:0 auto; 
}

DEMO

來源

2013-07-09 10:53:52 Sowmya

不工作。你必須添加一個'明確的：正確的'來解決他的問題。 – Nitesh

添加到您的CSS樣式。

img.displayed { 
    display: table-caption; 
    margin: 0 auto; 
}

EDIT

從IlyaStreltsyn的輸入，我同意的clearing的right點與display:block用於圖像爲中心。

例如，

img.displayed { 
    display: block; 
    margin: 0 auto; 
    clear: right; 
}

來源

2013-07-09 10:54:59 Nitesh

爲什麼'display：table-caption;'？ – Dom

用於對有問題的圖像進行居中。 - @Dominic – Nitesh

那麼爲什麼不按照別人的建議'display：block;'？它當然不是一個表格標題.. – Dom

內嵌塊（像是剛內聯，這是通過默認的圖像）參與在直列式格式化內容，而不是塊格式化上下文。這就是爲什麼他們不服從margin:auto（這實際上意味着他們的margin: 0），但服從他們的祖先塊元素的text-align。

來源

2013-07-09 10:59:28

檢查Fiddle here CSS和代碼

#header { 
    text-align:center; 
} 
img.displayed{ 
    display: block; 
    margin:0 auto; 
} 

<div id="header"> 
<img src="http://www.0034.eu/propmanager/images/background-space.png" class="displayed" border="0" width="100" height="100"/> 
</div>

來源

2013-07-09 11:06:22

爲什麼不通過CSS而不是內聯來設置'width'，'height'和'border'？ – Dom

水平圖像對齊CSS

回答

相關問題