我正在制作导航菜单，如下所示。
/*
Variables
*/
body {
font: 100% "Lato", sans-serif;
margin: 0;
}
#container {
width: 100%;
margin-top: 47px;
}
/*
Navigation menu
*/
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: white;
position: fixed;
top: 0;
width: 100%;
/*box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);*/
border-bottom: solid 3px #21ce99;
z-index: 1;
}
nav ul li {
float: left;
}
nav ul li a {
display: block;
color: #21ce99;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
nav ul li a:hover {
background-color: #F2F2F2;
}
/*
Layout
*/
section {
position: relative;
float: left;
width: 60%;
background-color: white;
}
aside {
position: relative;
float: right;
width: 40%;
clear: right;
}
footer {
clear: both;
background-color: #21ce99;
height: 500px;
}
/*
Styling
*/
h1 {
color: rgba(0, 0, 0, 0.87);
font: 300% "Lato", sans-serif;
padding: 30px;
}
p {
color: rgba(0, 0, 0, 0.54);
font-size: 1.3em;
margin: 20px;
}
a#logo {
font: 300% 'Wire One', sans-serif;
}
img {
width: 100%;
max-width: 600px;
margin: 10px;
}
table, th, td {
border: solid .13em #16a085;
border-radius: .3em;
font-size: 15px;
padding: 10px;
border-collapse: collapse;
}
/*
Widgets
*/
.btn {
padding: 1em 1em;
display: inline-block;
border-radius: .38em;
border: .12em solid #21ce99;
text-decoration: none;
color: #21ce99;
margin: 20px;
}
.btn:hover {
background-color: #21ce99;
color: white;
}<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="stylesheet.css" />
<link href='https://fonts.googleapis.com/css?family=Wire+One|Lato:100,100italic,300,300italic,400italic,400,700,700italic,900,900italic' rel='stylesheet' type='text/css'>
<title>methusela</title>
</head>
<body>
<nav>
<ul>
<li><a id="logo" href="index.html">methusela</a></li>
<li><a href="index.html">Discover</a></li>
<li><a href="histoire.html">Buy</a></li>
<li><a href="contact.html">Yes</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
<div id="container">
<section>
<h1></h1>
<a href="#" class="btn">
Learn more
</a>
</section>
<aside>
<img src="" />
</aside>
<footer>
</footer>
</div>
</body>
</html>所有链接最初都垂直放置在导航框的中间，但在我添加了一个使用不同大小文本的 Logo 之后。所有菜单链接不再位于中间。
有没有办法让菜单链接的尺寸自动填充整个框以与最大的元素对齐？或者有没有办法让链接在框中垂直居中？
非常感谢您的帮助。
最佳答案
将 ul 显示为 flex 并使用 align-items: center 和 justify-content: center 属性将它们分别垂直和水平放置在盒子的中央。
nav ul {
display: flex;
align-items: center;
justify-content: center;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: white;
position: fixed;
top: 0;
width: 100%;
/*box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);*/
border-bottom: solid 3px #21ce99;
z-index: 1;
}
JSFiddle .
当您使用 align-items: center 时，您的元素在 flex 容器内垂直居中。
当您使用 justify-content: center 时，您的元素在 flex 容器内水平居中。
关于html - 如何将导航链接设置为与 Logo 相同的高度？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37082093/