爲什麼我的圖像中心不會？

這裏是我的CSS

.heading { 
    display: block; 
    margin-left: 50%; 
}

而且我的形象顯然是在頁面的右側，而不是中心

2016-04-27 oneman

因爲保證金沒有考慮到圖像的寬度。這是50％的圖像的開始，而不是中間。如果你想這樣做，它需要保留餘量：50％; margin-left：-100px; （或圖像寬度的一半） – NickOS

這不起作用，因爲margin-left: 50%不是你如何居中對象。所有這些都會將50％的屏幕放在圖像的左側。正確的方法是這樣的：

.header { 
margin: 0 auto; 
width: [image width]; 
}

在樣式表中。這將告訴瀏覽器在圖像的頂部和底部放置0邊距，並自動將邊距置於左側和右側。您還需要添加width: [width];才能正常工作。

2016-04-27 02:14:44 KyleDotExe

試試這個

<div class="heading"> 
<img src="img url"> 
</div>

風格

.heading{ 
display:block; 
text-align:center; 
}

2016-04-27 01:00:00

margin-left: 50%不做中心。

正確的編碼是margin: 0 auto;。我假設這個類heading被放置在圖像本身上。否則你的容器將填滿整個空間，margin 0自動不會移動它。

左邊50％的邊距會將頁面左側的圖像精確地推到50％左右。保證金還有很多，取決於你如何定位圖像取決於你需要應用哪些特徵。

2016-04-27 01:00:22

對於自動保證金的工作，您還需要指定元素的寬度;在這種情況下，圖像。 – Muqito

爲真。但糾正我，如果我錯了，大多數時間圖像的寬度，允許邊距自動工作。 –

是的;但是我想他是否想在某個時候把整個div放在中心位置;那麼他需要寬度屬性:) 但是，如果它只是一個圖像，他會中心，你是對的！ – Muqito

我前段時間也遇到了同樣的問題，當時我試圖將一些物品居中。

我能夠用這個代碼在這裏做到這一點：

HTML：

<div class="center"> 
    <img src="http://i.stack.imgur.com/q2WsC.png"/> 
</div>

CSS：

.center { 
    margin: 0 auto; 
}

此外，還可以選擇添加少量的添加到CSS以使文本居中，這樣，如果您希望以CSS爲中心，那就不再需要工作了DED。該CSS將是

text-align: center;

只需將該元素添加到您的CSS後的margin元素。

希望這對你有所幫助。

2016-04-27 02:50:51 RedXTech

回答