html - 移动导航菜单图像

Question

你可以看到中间的图像。

知道如何将其向下移动以匹配吗？我的代码包含为 jsfiddle .图像下方也有一些空间，我无法删除它。有什么方法可以移动它吗？

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>

CSS

body {
    width: auto;
    background-image: url(blue4.jpg);
    background-size: cover;
    margin: 2px 0 0 0;
}
#menu {
    height:210px;
    line-height:36px;
    margin:0 auto;
    text-align:center;
    width:800px;
    padding:0;
}
#menu ul {
    display: inline;
    -webkit-padding-start: 0px;
    -webkit-margin-before: 2x;
    -webkit-margin-after: 0px;
    margin:0;
    font-size: 0;
}
#menu ul li {
    text-algin:center;
    display:inline;
    font-family:Arial, sans-serif;
    font-size:40px;
    padding:0 0 10px 0;
    margin:0;
    text-decoration:none;
    background-image:url(../Pics/Buttons/Menu/Menu.gif);
}
#menu a {
    text-decoration:none;
    color:#000000;
    margin:10px 0;
    padding:0;
    min-width:100px !important;
    display:inline-block;
}
#menu a:hover {
    font-weight:bolder;
}
span {
    width:100%;
    font-size:30px;
    border-left: 1px solid black;
    border-right: 1px solid black;
}
.widthAuto {
    width:auto;
}

Answer 1

试试这个:

#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 */
}

Working Fiddle