Can not center CSS element.. MAD!

Question

I am pulling my hair out. I cant center an element.

My fiddle: http://jsfiddle.net/BC37U/

I want My Account centered, as the Welcome User is and it will not go no matte what I do. WHY!

Thanks! :)

Answer 1

I tried a different approach, since My Account it's in a single line, setting line- height to the height of the container vertical align the element. So here is my proposal:

CSS:

.clearfix {
    display:block;
}

.clearfix:after {
visibility: hidden;
    display: block;
    font-size: 0;
    content: ".";
    clear: both;
    height: 0;
}

.loggedin_container { 
margin-left: -10px;
    width:920px;
    background-color: #333333;
    color: white;
    -moz-border-radius-topright: 5px;
    border-top-right-radius: 5px;
    -moz-border-radius-topleft: 5px;
    border-top-left-radius: 5px;
}

#nav_login_welcomeuser{
    font-size: 12px;
    font-weight: bold;
padding: 7px 10px 0px 15px;
    float: left;
    display: inline;
}

#nav_login_navigation {
    display: block;
    float: left;
    text-decoration: none;
    list-style: none;
}

#nav_login_navigation li{
    float: left;
    font-size: 12px;
    font-weight: bold;
    opacity:0.8;
    filter:alpha(opacity=80);
    border-left: 1px solid white;
}

#nav_login_navigation img{
    margin-left: 10px;
    float: left;
}

#nav_login_navigation li span{
    margin-left: 5px;
    line-height: 30px;
    display:block;
    float:left;
}

#nav_login_navigation li:hover{
    opacity:100;
    filter:alpha(opacity=100);
}

HTML:

<div class="loggedin_container noselect clearfix">
<span id="nav_login_welcomeuser">
    Welcome User!
</span>
<ul id="nav_login_navigation">
    <li>
    <img class="nav_login_floatleft" src="../images/nav/house16.png"/>
    <span>My Account</span>
    </li>
</ul>

For the markup i added clearfix class, for clearing floated elements.

I also use the reset from meyerweb, just in case you don't have it.

Hope it works for you.

Answer 2

Add vertical-align: center to #nav_login_navigation img like so:

#nav_login_navigation img{
    margin-top: 4px; 
    margin-left: 10px;
    vertical-align: middle;
}