無法居中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重置，以防萬一你沒有它。

希望它適合你。