如何将导航链接设置为与徽标相同的高度？

Question

我正在制作导航菜单，如下所示。

/*
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>

所有的链接本来都是垂直的在导航框的中间，但是在我添加了一个使用不同大小文本的标志之后。所有菜单链接不再位于中间。

有没有办法让菜单链接的尺寸自动填满整个框以与最大的项目对齐？或者有没有办法让链接在框内垂直居中？

非常感谢您的帮助。

Answer 1

将 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 容器内水平居中。

如何将导航链接设置为与徽标相同的高度？

How to set navigation links to same height as logo?

html

css

navigation

nav

navbar