Html 固定导航栏左侧，项目垂直对齐，高度相等

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

html，正文{
保证金：0；
填充：0；
}
.集装箱{
宽度：100%；
颜色：鬼白色；
填充：0；
保证金：0；
}
标题{
宽度：10%；
背景：轻珊瑚；
}
.主要内容{
宽度：90%；
背景#25b99a；
框大小：边框框；
}
标题，。主要内容{
浮动：左；
高度：100vh；
}
标题nav ul li{
列表样式：无；
}
标题nav ul li a{
文字装饰：无；
}
收割台导航ul li，收割台导航ul li a{
高度：33.33vh；
显示：块；
颜色：鬼白色；
}

JS-Bin





欢迎来到我的网站
Lorem ipsum dolor sit amet，奉献精英。合理的驱蚊剂！在rem totam sed maxime reprehenderit nihil quam MOLLITA dicta est LABROUM，拥有商品和商品的所有权，临时公积金，真实性

在导航中添加一个

，有助于：

---

谢谢，真的很有帮助。我还尝试了线条高度：将高度设置为每一个li的高度，看起来效果不错。你认为这是解决问题的正确方法吗？没问题！我不会用线的高度来做这个。因为如果你的导航中有一个两行的

，它看起来就像两个独立的元素。在这里使用

，可以让您获得响应速度更快、基于内容的可靠代码。您也可以使用flexbox网格来实现（）