html - 为 a 设置垂直对齐
问题描述
我知道这种类型的问题经常被问到,但我在搜索结果中找不到我的答案。所以在我的 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>
问题是“注销用户”标签没有居中垂直对齐,并且比“主页”标签略高。
如何将“注销用户”标签的垂直对齐设置为居中,以便该标签调整为“主页”标签?
解决方案
使用强大的 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()
。
推荐阅读
- neo4j - Cypher/Neo4j 查询以获取当前节点和其他相关信息
- macos - 无法从插件连接到 NSMachBootstrapServer
- ios - iOS - SwiftUI - 执行异步操作后导航到下一个屏幕
- compiler-construction - ANTLR 符号表中的这些值是什么意思?
- javascript - 带有歌词和时间戳的 API
- unity3d - lerp 持续延迟
- javascript - 否定正则表达式中的多个字符集
- ios - 在函数中使用结构并在 @IBAction (Swift) 中引用它的问题
- python - 我只需要使用相同的方法将 JavaScript 问题的解决方案转换为 Python 代码
- c++ - 当我尝试从用户那里获取数组的数量时出现错误,我需要它以正常方式没有指针数组