将配置文件图像添加到bootstrap导航栏

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>

我想将图片居中，并在个人资料图片下方显示用户名。 这是.profile-img类

的css

.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;
    }

高度和行高值可选。