html - 将 <form> 标记的垂直对齐设置为导航栏元素以居中

Question

我知道这类问题经常被问到，但我在搜索结果中找不到我的答案。所以在我的 Razor View 中有一个导航栏，它包括两个元素:“主页”和“注销用户”:

<nav class="navbar navbar-inverse navbar-fixed-top"  >
    <div class="container">
        <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav navbar-left">
                <li><a asp-area="" asp-controller="Home" asp-action="Index">Home</a></li>
            </ul>
            <ul class="nav navbar-nav pull-right">
                @if (SignInManager.IsSignedIn(User))
                {
                    <li>
                        <form method="post" asp-action="logout" asp-controller="Account">
                            <button type="submit" class="navbar-link btn btn-link" >
                                    Logout  @User.Identity.Name
                            </button>
                        </form>
                    </li>                     
                }
                else
                {
                    <li><a asp-area="" asp-controller="Account" asp-action="Register">Register</a></li>
                    <li><a asp-area="" asp-controller="Account" asp-action="Login">Login</a></li>
                }
            </ul>

        </div>
    </div>
</nav>

问题是“Logout User”标签没有居中垂直对齐，并且比“Home”标签高一点。

如何将“注销用户”标签的垂直对齐设置为居中，以便此标签适应“主页”标签？

Answer 1

利用强大的 Flexbox。

您可能需要对此进行调整，使其不适用于您所有的.container 选择器，但它应该给您一个想法:-)

nav{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:80px;
  background:red;
}
.container{
  height:100%;
}
.navbar-collapse{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:100%;
}
ul{
  list-style:none;
}
ul:first-child{
  margin-left:25px;
}
ul:last-child{
  margin-right:25px;
}
*{
  margin:0;padding:0;
}

<nav class="navbar navbar-inverse navbar-fixed-top"  >
    <div class="container">
        <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav navbar-left">
                <li><a asp-area="" asp-controller="Home" asp-action="Index">Home</a></li>
            </ul>
            <ul class="nav navbar-nav pull-right">

                    <li>
                        <form method="post" asp-action="logout" asp-controller="Account">
                            <button type="submit" class="navbar-link btn btn-link" >
                                    Logout  @User.Identity.Name
                            </button>
                        </form>
                    </li>                     
            </ul>
        </div>
    </div>
</nav>

为清楚起见，我删除了您的 .Net if()。