將自定義文本對齊到最右端和中心

Question

在我的ASP.NET MVC5應用程序中，我想將自定義文本Hello User!!顯示到最右端並將其垂直對齊到中心位置。爲了達到這個目的，我實施了nav navbar-nav navbar-right。該文本是在極端的權利，但其垂直排列依然位居前列。我如何將其垂直對齊設置爲中心？

以下是我的_Layout.cshtml文件中的代碼。

<div class="navbar navbar-inverse navbar-fixed-top"> 
    <div class="container"> 
     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
      </button> 
      @Html.ActionLink("Application name", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" }) 
     </div> 
     <div class="navbar-collapse collapse"> 
      <ul class="nav navbar-nav"> 
       <li>@Html.ActionLink("Home", "Index", "Home")</li> 
       <li>@Html.ActionLink("About", "About", "Home")</li> 
       <li>@Html.ActionLink("Contact", "Contact", "Home")</li> 
      </ul> 
      <ul class="nav navbar-nav navbar-right"> 
       <li style="color:white">Hello User !!</li> 
      </ul> 
     </div> 
    </div> 
</div> 

Nav bar alignment issue

Answer 1

使用類navbar-text來顯示文本。

可以更換

<ul class="nav navbar-nav navbar-right"> 
    <li style="color:white">Hello User !!</li> 
</ul> 

通過

<p class="navbar-text navbar-right">Hello User</p> 

看看在Bootstrap documentation

Answer 2

增加CSS行高度應該大於高度。