html - 在没有空间的情况下将图像居中对齐

Question

我想在页面的导航栏中将 Logo 居中对齐。

这是我的代码:

<div class="nav">
    <ul>
        <li id="center">
           <a href="home.php"><img src="images/w_logo.gif"></a>
        </li>
    </ul>
</div>

我在网上找到了这个解决方案:

#center img{
    display: block;
    margin: auto;
}

但问题是，通过使用 display:block 属性，我在图像周围获得了空间，这增加了我的导航栏的高度，但我无法删除该空间。

帮助将不胜感激。

Answer 1

检查这个 fiddle 。 https://jsfiddle.net/5huhpxuk/

#center img {
  display: block;
  margin: auto;
}

.nav {
  background-color: black;
  line-height: 0%
}

<div class="nav">
  <ul>
    <li id="center">
      <a href="home.php"><img src="http://zdnet3.cbsistatic.com/hub/i/2015/09/01/cb834e24-18e7-4f0a-a9bf-4c2917187d3f/83bb139aac01023dbf3e55a3d1789ad8/google-new-logo.png"></a>
    </li>
  </ul>
</div>