在网格中垂直对齐右对齐的导航栏项目
在网格中垂直对齐右对齐的导航栏项目
提问于 2019-04-16 02:19:51
我想使用CSS grid属性创建一个导航栏。目前我有这个
#navbar {
height: 60px;
display: grid;
justify-items: right;
padding: 20px;
background: red;
}
#navbarLinkContainer {}
a {
text-decoration: none;
margin: 0 10px;
color: white;
background: black;
}<div id="navbar">
<div id="navbarLinkContainer">
<a href="/">Home</a>
<a href="/about">About</a>
<a href="/projects">Projects</a>
<a href="/contact">Contact</a>
<a href="/imprint">Imprint</a>
</div>
</div>
我的问题是，我不知道如何在navbarLinkContainer中将链接垂直居中。
我试图将align-items: center和vertical-align: middle添加到navbarLinkContainer中，但是没有帮助。那么，如何将导航栏中的链接居中呢？
回答 3
Stack Overflow用户
回答已采纳
发布于 2019-04-16 02:25:00
为什么不在#navbar上使用align-items: center呢?因为它是一个弹性容器，它会把它的孩子放在中间对齐；还把你的justify-items: right改成了justify-content: end
#navbar {
height: 60px;
display: grid;
justify-content: end;
padding: 20px;
background: red;
align-items: center;
}
#navbarLinkContainer {}
a {
text-decoration: none;
margin: 0 10px;
color: white;
background: black;
}<div id="navbar">
<div id="navbarLinkContainer">
<a href="/">Home</a>
<a href="/about">About</a>
<a href="/projects">Projects</a>
<a href="/contact">Contact</a>
<a href="/imprint">Imprint</a>
</div>
</div>
Stack Overflow用户
发布于 2019-04-16 02:25:32
您可以简单地将align-items: center添加到#navbar中
#navbar {
height: 60px;
display: grid;
justify-items: right;
align-items: center;
padding: 20px;
background: red;
}
#navbarLinkContainer {}
a {
text-decoration: none;
margin: 0 10px;
color: white;
background: black;
}<div id="navbar">
<div id="navbarLinkContainer">
<a href="/">Home</a>
<a href="/about">About</a>
<a href="/projects">Projects</a>
<a href="/contact">Contact</a>
<a href="/imprint">Imprint</a>
</div>
</div>
Stack Overflow用户
发布于 2019-04-16 02:27:26
如果您希望所有链接都位于中心位置，可以在导航栏中修改"justify-items: center;“
#navbar {
height: 60px;
display: grid;
justify-items: center;
padding: 20px;
background: red;
}
#navbarLinkContainer {}
a {
text-decoration: none;
margin: 0 10px;
color: white;
background: black;
}
<div id="navbar">
<div id="navbarLinkContainer">
<a href="/">Home</a>
<a href="/about">About</a>
<a href="/projects">Projects</a>
<a href="/contact">Contact</a>
<a href="/imprint">Imprint</a>
</div>
</div>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/55695117
复制相关文章
相似问题
腾讯云开发者
