是否可以在 div 的(垂直)中间显示菜单项？
我看了 10 多个关于居中的视频，看了大约 20 个在线“教程”。每个人都使用 jQuery/Bootstrap 和内置类。我已经手动重新创建了每个效果，但我无法让菜单项 div 降到中间。
https://jsfiddle.net/2zwxL14q/
HTML:
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<nav>
<h1 style="height: 75px; width: 200px; background: #f00;">
<a href="/">
LOGO
</a>
</h1>
<div id="navelements">
<ul>
<li><a href="#">Home</a>
<li><a href="#">About Us</a>
<li><a href="#">Contact</a>
</ul>
</div>
</nav>
</body>
</html>
CSS:
nav {
background-color: #13293d;
box-sizing: border-box;
position: fixed;
top: 0;
left: 0;
padding: 10px;
text-align: right;
width: 100%;
z-index: 100;
}
nav h1 {
float: left;
}
#navelements ul {
list-style: none;
}
#navelements ul li {
display: inline-block;
}
#navelements ul li a {
color: #fff;
font-size: 1em;
font-weight: 800;
padding: 5px 10px;
text-decoration: none;
text-transform: uppercase;
}
最佳答案
给nav这个样式
display: flex;
justify-content: space-between;
align-items: center;
那么你的 nav 将如你所料完全位于中间
nav {
background-color: #13293d;
box-sizing: border-box;
position: fixed;
top: 0;
left: 0;
padding: 10px;
text-align: right;
width: 100%;
z-index: 100;
display: flex;
justify-content: space-between;
align-items: center;
}
nav h1 {
float: left;
}
#navelements ul {
list-style: none;
}
#navelements ul li {
display: inline-block;
}
#navelements ul li a {
color: #fff;
font-size: 1em;
font-weight: 800;
padding: 5px 10px;
text-decoration: none;
text-transform: uppercase;
} <nav>
<h1 style="height: 75px; width: 200px; background: #f00;">
<a href="/">
LOGO
</a>
</h1>
<div id="navelements">
<ul>
<li><a href="#">Home</a>
<li><a href="#">About Us</a>
<li><a href="#">Contact</a>
</ul>
</div>
</nav>关于html - 在 nav 元素内垂直对齐 div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50432265/