无法居中CSS元素.. MAD！

Question

我正在拉我的头发。我不能集中一个元素。

我的小提琴：http://jsfiddle.net/BC37U/

我想我的账户为中心，为用户欢迎以及它是不会去任何磨砂我做什么。为什么！

谢谢！ :)

Answer 1

添加vertical-align: center到#nav_login_navigation img像这样：

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

Answer 2

我尝试了不同的方法，因为我的帐号这是在一个单一的线，线 - 高度设置为容器垂直对齐元素的高度。因此，这里是我的建议：

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> 

对于我添加clearfix类的标记，清算浮动元素。

我也使用从meyerweb重置，以防万一你没有它。

希望它适合你。