将自定义文本对齐到最右端和中心

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行高度应该大于高度。