Html 无法在CSS网格框内垂直居中导航栏
我已经试着解决这个问题有一段时间了。如果我真的以视觉的方式表现它,我将能够最好地解释它: 我正在尝试垂直对齐导航栏 我尝试过使用Html 无法在CSS网格框内垂直居中导航栏,html,css,vertical-alignment,css-grid,Html,Css,Vertical Alignment,Css Grid,我已经试着解决这个问题有一段时间了。如果我真的以视觉的方式表现它,我将能够最好地解释它: 我正在尝试垂直对齐导航栏 我尝试过使用align self,但似乎没有任何变化 /* Navigation */ .navigation { overflow: hidden; margin: 0; align-self: center; } .navigation a { display: block; float: right; color: #f2f2f2; text
align self
,但似乎没有任何变化
/* Navigation */
.navigation {
overflow: hidden;
margin: 0;
align-self: center;
}
.navigation a {
display: block;
float: right;
color: #f2f2f2;
text-align: center;
text-decoration: none;
font-family: 'Quicksand', sans-serif;
font-size: 1rem;
}
.navigation a:hover {
background-color: #ddd;
color: black;
}
/* Hide the link that should open and close the navigation on small screens */
.navigation .icon {
display: none;
}
这是一个我对css感到困惑的案例,还是一个div定位不正确的案例
<!-- Navigation bar -->
<div class="navigation" id="myNavigation">
<a href="index.html">Home</a>
<a href="#services">About Me</a>
<a href="#about-me">Services</a>
<a href="#portfolio">Portfolio</a>
<a href="#contact">Contact</a>
<a href="javascript:void(0);" class="icon" onclick="openNavigation()">☰</a>
</div>
</div>
好的,我找到了解决方案。我需要使我的css网格
显示:flex
和对齐项目:居中