Html 移动导航菜单图像 你可以看到中间的图像。

你知道怎么把它移下来配吗？ 我的代码包含为。图像下方也有一些空白，我无法删除它。有什么方法可以移动它吗

HTML

<div id="menu">
    <ul>
        <li><span><a href="/1.html">Link 1</a></span>

        </li>
        <li><span><a href="/2.html">Link 2</a></span>

        </li>
        <li class='widthAuto'><a href="/3.html"><img src='https://www.google.co.in/images/icons/product/chrome-48.png' height='80' height="175px" alt="Domu"/></a>

        </li>
        <li><span><a href="/4.html">Link 4</a></span>

        </li>
        <li><span><a href="/5.html">Link 5</a></span>

        </li>
    </ul>
</div>

---

尝试添加以下类

#menu img{
 position:relative;
 top:20px;
}

试试这个：

#menu a{
    /* other css properties */
    height: 80px;             /* equal to image height */
    line-height: 80px;        /* equal to this element height,  to get in middle */
    vertical-align: middle;   /* To keep all the elements in middle of the parent container */
}

---

还可以考虑在li元素上使用

浮点：左

，而不是

显示：内联

。如果您真的想使用显示，请至少使用

display:inline block

。通过将块元素的显示设置为内联，它实际上会把整个画面弄得一团糟

#menu a{
    /* other css properties */
    height: 80px;             /* equal to image height */
    line-height: 80px;        /* equal to this element height,  to get in middle */
    vertical-align: middle;   /* To keep all the elements in middle of the parent container */
}