即使將img設置為塊元素，為什么也無法居中圖像？

Question

我花了很長時間試圖弄清楚為什么我無法將img元素居中。 我已將其設置為塊元素，並將邊距設置為自動。 但是，始終以左邊距左邊距右邊距右邊顯示顯示。

如果有人可以幫助將不勝感激。

 #header { width: 100%; height: 30px; } body { margin: 0; } li { display: inline; } a { display: inline-block; text-decoration: none; color: #000; margin-right: 3px; font-family: arial, sans-serif; font-size: 12px; } ul { float: right; } #logo { position: relative; top: 200px; } #logo img { display: block; margin: auto; height: 92px; } #logo p { position: absolute; top: 3.5em; left: 51em; } 

 <div id="header"> <ul> <li><a href="#">Gmail</a></li> <li><a href="#">Images</a></li> <li> <a href="#"><img src=""></a> </li> <li> <a href="#"><img src=""></a> </li> <li> <a href="#"><img src=""></a> </li> </ul> </div> <div id="content"> <div id="logo"><img src="https://www.google.com.au/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png"> </div> <div id="search"></div> <div id="button1"></div> <div id="buttton2"></div> </div> <div id="footer"></div> 

Answer 1

您浮動標題div，但從不清除它。 加：

#content {
  clear:both;
}

jsFiddle示例

Answer 2

好吧，這是因為標題中的ul，您應該在標題close標簽之后添加

<div style="clear:both"></div>

 #header { width: 100%; height: 30px; } body { margin: 0; } li { display: inline; } a { display: inline-block; text-decoration: none; color: #000; margin-right: 3px; font-family: arial, sans-serif; font-size: 12px; } ul { float: right; } #logo { position: relative; top: 200px; } #logo img { display: block; margin: auto; height: 92px; } #logo p { position: absolute; top: 3.5em; left: 51em; } 

 <div id="header"> <ul> <li><a href="#">Gmail</a></li> <li><a href="#">Images</a></li> <li> <a href="#"><img src=""></a> </li> <li> <a href="#"><img src=""></a> </li> <li> <a href="#"><img src=""></a> </li> </ul> </div> <div style="clear:both"></div> <div id="content"> <div id="logo"><img src="https://www.google.com.au/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png"> </div> <div id="search"></div> <div id="button1"></div> <div id="buttton2"></div> </div> <div id="footer"></div>