Question

Consider the following structure:

<ul>
    <li><a href="">Home</a><img src="menu_hover_line.jpg" class="whiteBarHover" /></li>
    <li><a href="">Contacts</a><img src="menu_hover_line.jpg" class="whiteBarHover" /></li>
</ul>

Here a is “a” block element (display:block;) and it is a menu element, with certain height and paddings from right and left:

li
{
display:inline-block;
float:left;
position:relative;  
}
a
{
    text-decoration:none;
    font-family:Arial, Helvetica, sans-serif;
    font-size:14px;
    color:#131313;
    display:block;
    line-height:51px;
    padding:0px 29px;
}
a:hover
{
    background-color:#000;
    border:0 none;
    color:#FFF;
} 
.whiteBarHover
{
    width:40px;
    height:3px;
    position:absolute;
    top:2px;
    visibility:hidden;
}
div#menu li:hover img.whiteBarHover
{
    visibility:visible;
}

The point of the “img” and related css code in each “li” is to have the image shown below

menu_hover_line.jpg =>

on hover event in top center of each menu item. All is done. but the image is not in the center in horizontal direction. How I can center it?

Answer 1

If it’s a position absolute then you have to define left:50% & margin-left:-20px; half the width of the image. like this:

.whiteBarHover
{
    width:40px;
    height:3px;
    position:absolute;
    top:2px;
    left:50%;
    margin-left:-20px;
    visibility:hidden;
}

Check this http://jsfiddle.net/BrURq/