移动导航菜单图像

enter image description here

不知道如何往下移动相匹配吗？我的代码包含在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; 
}

来源

2014-03-07 user3391916

[jsfiddle]（http://jsfiddle.net/pmkjj/3/） – user3391916

尝试添加下面的类

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

来源

2014-03-07 11:59:48 Morne

是啊！你做了我的一天，非常感谢！ – user3391916

快乐。请记住将其中一个答案标记为已接受。 – Morne

试试这个：

#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

来源

2014-03-07 12:02:48

想想也使用float: left在li元素，而不是display:inline。如果你真的想要用显示器至少使用display:inline-block。通过将块元素的显示设置为内联，它确实会混淆整个图片。

来源

2014-03-07 12:04:37 bbahov

移动导航菜单图像

回答

相关问题