移动导航菜单图像

时间:2014-03-07 11:56:09

标签: html css navigation

您可以在中间看到图像。

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;
}

3 个答案:

答案 0 :(得分: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

答案 1 :(得分:0)

尝试添加以下课程

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

答案 2 :(得分:0)

还要考虑在li元素上使用float: left而不是display:inline。如果你真的想要使用显示器,至少要使用display:inline-block。通过将块元素的显示设置为内联,它确实使整个画面混乱。