中心图像在列表项上方 [英] Center image above list items

问题描述

我正在处理一个项目，在我的UL> LI风格上遇到麻烦。

I am working on a project and having trouble with my UL>LI style.

我想把图片放在列表上，通过链接图像颜色变化，所以我使用2个图像

i am trying to put images all over the list and i want when i hover over the link the image color change so i use 2 images

1橙色&
1 blue

1 orange & 1 blue

但我无法通过顶部导航链接将图像分类。

but i am unable to centrise the images over top navigation links.

img src =https://i.stack.imgur.com/ThHQb.jpgalt =enter image description here>

代码是：

HTML：

<div id="TopMenu">
    <ul style="display:">
        <li class="HeaderLiveChat" style="display:none"></li>
        <li class="First" style="display:">
            <a href="/account.php">My Account</a>
        </li>
        <li style="display:">
            <a href="/orderstatus.php">Order Status</a>
        </li>
        <li style="display:">
            <a href="/wishlist.php">Wish Lists</a>
        </li>
        <li>
            <a href="/giftcertificates.php">Gift Certificates</a>
        </li>
        <li class="CartLink" style="display:">
            <a href="/cart.php">
        </li>
        <li style="display:">
        <div>
            <a onclick="" href="/login.php">Sign in</a>
            or
            <a onclick="" href="/login.php?action=create_account">Create an account</a>
        </div>
        </li>
    </ul>
    <br class="Clear">
</div>

CSS ：

/* Top Navigational Menu */
#TopMenu {
    position: absolute;
    right: 10px;
    top: 70px;
    font-size: 10px;
    text-align: right;
}

#TopMenu ul, #TopMenu li {
    list-style: none;
    padding: 0;
    margin: 0;
}

#TopMenu ul li {
    display: inline;
    list-style-image: none;
    list-style-position: outside;
    list-style-type: none;
    margin: 0px;
    padding: 0px 4px 0 6px;
}

#TopMenu ul li.First {
    border-left: 0;
}

#TopMenu ul li.home {
    background:url('http://cdn1.iconfinder.com/data/icons/munich/16x16/home.png') no-repeat;
    height:16px; width:16px;
}

#TopMenu a {
    color: #333;
}

#TopMenu a:hover, #TopMenu a:visited {
    color: #333;
}

#TopMenu li div {
    display: inline;
}

请帮我解决这个问题

注：

我想在每个链接上更改图标，上述图片只是一个示例图片

I want changed icon over each link, the above image is just an example image

谢谢

推荐答案

进行了两项更改

1. 为图片添加了25像素的顶部填充。

1. Added a top padding of 25px to li for the image

#TopMenu ul li {
display: inline;
list-style-image: none;
list-style-position: outside;
list-style-type: none;
margin: 0px;
padding: 25px 4px 0 6px;
}

更改标志 background-position：中心; （请注意，我使用短手符号）

changed the logos background-position:center; ( Please note that I have used short hand notation )

#TopMenu ul li.home {
background:url('http://cdn1.iconfinder.com/data/icons/munich/16x16/home.png') no-repeat center;
height:16px; width:16px;
}
#TopMenu ul li.home:hover {
background:url('http://cdn1.iconfinder.com/data/icons/cologne/16x16/home.png') no-repeat center;
}

a href =http://jsfiddle.net/naveen/HuTge/1/ =nofollow> http://jsfiddle.net/naveen/HuTge/1/

Working Demo : http://jsfiddle.net/naveen/HuTge/1/

PS：请注意，我使用 #TopMenu ，markdown无法正常工作。

P.S: Please note that I am using #TopMenu and markdown is not working properly.

这篇关于中心图像在列表项上方的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！