固定导航栏左侧的项目采用相同的高度垂直对齐答案

【问题标题】：fixed navigation bar left with items take equal height vertically aligned固定导航栏左侧的项目采用相同的高度垂直对齐
【发布时间】：2017-06-11 08:42:16
【问题描述】：

我正在创建一个简单的左浮动固定垂直导航栏，它占据视口高度的 100%，并且每个列表项的高度应该相等。我已经设法做到了所有这些，但无法根据单个项目的高度使列表项文本在中心垂直对齐。请在下面查看我的代码。

html, body {
  margin: 0;
  padding: 0;
}

.container {
  width: 100%;
  color: ghostwhite;
  padding: 0;
  margin: 0;
}

header {
  width: 10%;
  background: lightcoral;
}

.main-content {
  width: 90%;
  background: #25b99a;
  box-sizing: border-box;
}

header, .main-content {
  float: left;
  height: 100vh;
}

header nav ul li {
  list-style: none;
}


header nav ul li a {
  text-decoration: none;
}
header nav ul li, header nav ul li a {
  height: 33.33vh;
  display: block;
  color: ghostwhite;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <div class="container">
    
    <header>
      <nav>
        <ul>
          <li><a href="#">Home</a></li>
          <li><a href="#">Portfolio</a></li>
          <li><a href="#">Contact</a></li>
        </ul>
      </nav>
    </header>
    
    
    <div class="main-content">
      <h1>Welcome to my website</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus obcaecati cum rerum vel nesciunt ratione est! At rem totam sed maxime reprehenderit nihil quam mollitia dicta est laborum, possimus vero aspernatur commodi cum quia corporis earum porro, temporibus provident, veritatis.</p>
    </div>
    
    
    
  </div>
</body>
</html>

【问题讨论】：

标签： html css navigation css-float vertical-alignment

【解决方案1】：

在导航中添加<span> 会有所帮助： https://codepen.io/anon/pen/owxLZr

【讨论】：

谢谢，真的很有帮助。我还尝试了 line-height: 将高度设置为每个 li 的高度，并且似乎有效。您认为这是解决问题的正确方法吗？
没问题！我不会为此使用行高。因为如果您最终在导航中使用 2 行长 <li>，它看起来就像是 2 个独立的元素。在此处使用<span>，可以让您拥有更可靠且基于内容的代码。你也可以使用 flexbox 网格 (css-tricks.com/snippets/css/a-guide-to-flexbox)