爲什麼沒有保證金：汽車中心的圖像？

<html> 
<head> 
<title>Test</title> 
</head> 
<body> 
    <div> 
     <img src="queuedError.jpg" style="margin:auto; width:200px;" /> 
    </div> 
</body> 
</html>

div擴大到100％，因爲它應該但圖像不居中。爲什麼？爲什麼沒有保證金：汽車中心的圖像？

來源

2010-06-10 Joe Phillips

165

因爲您的圖像是inline-block element。你可以將其更改爲block-level element這樣的：

<img src="queuedError.jpg" style="margin:auto; width:200px;display:block" />

，它會居中。

來源

2010-06-10 14:19:07 Keltex

添加以下代碼style="text-align:center;"

嘗試

<html> 
<head> 
<title>Test</title> 
</head> 
<body> 
    <div style="text-align:center;vertical-align:middle;"> 
     <img src="queuedError.jpg" style="margin:auto; width:200px;" /> 
    </div> 
</body> 
</html>

來源

2010-06-10 14:19:31

拼寫'text-align' – baloo 2010-06-10 14:21:47

我不認爲你的回答不正確，但你的顯示類型沒有任何解釋。 – 2010-06-10 14:34:10

雖然你的答案可以被視爲一種替代解決方案，但我不會建議。原因在於，如果您在div內添加其他任何內容，例如，它會將中心與圖像對齊。要將標題對齊到左側，您必須爲其編寫更多樣式。無論你添加到div中，你都必須繼續這樣做。因此強烈建議在圖像中添加'display：block;'。 – Devner 2014-03-08 14:47:55

你需要呈現爲塊級;

img { 
    display: block; 
    width: auto; 
    margin: auto; 
}

來源

2010-06-10 14:20:16 TheDeadMedic

它爲什麼只是水平對齊而不是垂直對齊？ – 2010-06-10 14:26:57

垂直對齊不像您希望的那樣直截了當。這完全取決於CSS規範 - 查看關於此問題的精美簡潔文章 - http://phrogz.net/css/vertical-align/index.html – TheDeadMedic 2010-06-10 14:33:26

<div style="text-align:center;"> 
    <img src="queuedError.jpg" style="margin:auto; width:200px;" /> 
</div>

來源

2010-06-10 14:20:31 Salil

開放div然後把

style="width:100% ; margin:0px auto;"

image標籤（或）內容

靠近格

來源

2010-06-10 14:43:43

我知道這是一個古老的職位，但想分享如何我解決了同樣的問題。

我的圖像繼承了父類的float：left。通過設置float：none我可以使margin：0 auto和display：block正常工作。希望它可以幫助未來的人。

來源

2013-10-09 19:18:50

我發現我必須爲對象定義一個特定的寬度，否則沒有其他東西會使它居中。相對寬度不起作用。

來源

2015-10-27 00:02:18 Catwoman

這不提供問題的答案。要批評或要求作者澄清，在他們的帖子下留下評論 - 你總是可以評論你自己的帖子，一旦你有足夠的[聲譽]（http://stackoverflow.com/help/whats-reputation），你會能夠[評論任何帖子]（http://stackoverflow.com/help/privileges/comment）。 – Chris 2015-10-27 07:09:50

我的觀點是，雖然有幾個人已經給出了可行的答案，但只有代碼包含對象寬度的特定定義時才能使用。例如：可以工作，但不要使用相對大小，如「寬度：50％」。當然，如果您使用「寬度：100％」，則居中不是問題，因爲對象的左側或右側沒有空白。 – Catwoman 2015-10-28 23:01:30

我找到了... margin：0 auto;爲我工作。但是我也看到它不起作用，因爲這個班被另一個具有特殊性的人所拋棄...... float：left; 請注意，您可能需要添加... float：none;當我編碼媒體查詢時，這起作用。

來源

2016-04-01 20:05:42 Dino

爲什麼沒有保證金：汽車中心的圖像？

回答

相關問題