將配置文件圖像添加到自舉導航欄

Question

我想添加一個配置文件圖像和註銷鏈接到自舉側導航欄。

這是到目前爲止我的代碼

<ul class="nav navbar-nav"> 
     <li> 
      <div class="img-rounded profile-img"></div> 
      @Html.ActionLink(User.Identity.GetUserName(), "Index", "Manage", routeValues: null, htmlAttributes: new { title = "Manage" }) 
     </li> 
     <li><a href="javascript:document.getElementById('logoutForm').submit()">Log off</a></li> 
    </ul> 

我想中心的圖像和顯示的輪廓圖像下方的用戶名。 這是CSS的.profile-img類

.profile-img { 
    margin-top: -5px; 
    margin-right: 5px; 
    float: left; 
    background: url('../Images/profile_pic_default.png') 50% 50% no-repeat; /* 50% 50% centers image in div */ 
    background-size: auto 100%; /* Interchange this value depending on prefering width vs. height */ 
    width: 30px; 
    height: 30px; 
} 

一些可否請您來爲我的解決方案？

Answer 1

.profile-img, a { 
     display: inline-block; 
     vertical-align: middle; 

} 

Answer 2

.nav li { 
     display: inline-block; 
     vertical-align: middle; 
     height: 30px; 
     line-height: 30px; 
    } 

高度和行高值可選。