即使我将img设置为块元素，为什么我不能将图像居中？

Question

我花了很长时间试图找出为什么我不能将img元素集中在一起。我将其设置为块元素，并将边距设置为auto。但是，显示屏始终显示边距小于右边距。

如果有人能提供帮助，我们将非常感激。

#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 example

Answer 2

嗯，这是因为标题中的ul，在标题关闭标记之后你应该添加

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

＆＃13;

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;