Html 将图像居中对齐而不留空间

我想在页面导航栏的中心对齐徽标

这是我的代码：

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

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

---

非常感谢您的帮助。

请尝试以下方法。此方法将

img

设置为

display:inline块

，使其成为内联元素，并允许其在父元素上声明

text align:center

时居中对齐

/*#中心img{
显示：块；
保证金：自动；
}*/
#居中{
文本对齐：居中；
}
保险商实验室{
列表样式：无；
保证金：自动；
填充：0px；
}
.导航{
背景：ddd；
边框底部：1px实心#bebebe；
}

试试下面的方法。此方法将

img

设置为

display:inline块

，使其成为内联元素，并允许其在父元素上声明

text align:center

时居中对齐

/*#中心img{
显示：块；
保证金：自动；
}*/
#居中{
文本对齐：居中；
}
保险商实验室{
列表样式：无；
保证金：自动；
填充：0px；
}
.导航{
背景：ddd；
边框底部：1px实心#bebebe；
}

检查这把小提琴。

#中心img{
显示：块；
保证金：自动；
}
.导航{
背景色：黑色；
线高：0%
}

检查这把小提琴。

#中心img{
显示：块；
保证金：自动；
}
.导航{
背景色：黑色；
线高：0%
}

#中心img{
显示：块；
保证金：自动；
}
ul{margin:0；}
li{填充：0；列表样式：无；}

#中心img{
显示：块；
保证金：自动；
}
ul{margin:0；}
li{填充：0；列表样式：无；}

您能否为该问题提供一个有效的代码片段或小提琴。您是否看到导致空间问题的原因。您可能需要检查填充和边距（顶部、底部）。。将所有这些设置为0@DanPhilip我添加了一个图像。你现在可以更好地理解它了。我希望。@SrikantSahu没有填充和边距，我甚至尝试将它们设为0。运气不好。你能为这个问题提供一个工作片段或小提琴吗？你看到是什么导致了空间问题了吗。您可能需要检查填充和边距（顶部、底部）。。将所有这些设置为0@DanPhilip我添加了一个图像。你现在可以更好地理解它了。我希望。@SrikantSahu没有填充和边距，我甚至尝试将它们设为0。不走运，谢谢。线路高度为：）很乐意帮忙：）谢谢。线路高度为：）乐意帮忙：）

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