如何垂直对齐导航元素中的列表项

Question

我正在尝试垂直对齐3"；李；在"；nav"；。然而；李；一直粘在"；nav"；，我试着为"；李"；，唯一改变的是边界的大小。

<style type="text/css">
body{
background-color: salmon;}
header {
height:80px;
backround-color:#C0504D;
color: white;
text-align: center; }
nav{
border-top: solid 2px white;
background-color: rgb(229,184,183);
text-align: center;
height: 80px;
vertical-align: middle;
}
nav li + li:before{
content: " | "
}
nav li{
display: inline;
list-style-type: none;
border: solid 1px black;
margin: 20px 0px;

}
nav li a{
font-size: 18px;
}
</style>
<nav>
<li><a href="submissionDates.html">Submisson Dates</a></li>
<li><a href="courseTutors.html">Course Tutors</a></li>
<li><a href="classTimes.html">Class Times</a></li>
</nav>

JSFiddle演示

Answer 1

Flexbox通常是获得幸福的最简单方法。。。

body {
background-color: salmon;
}
header {
height: 80px;
background-color: #C0504D;
color: white;
text-align: center;
}
nav {
border-top: solid 2px white;
background-color: rgb(229, 184, 183);
text-align: center;
height: 80px;
display: flex; /* flexy goodness */
flex-direction: column; /* flexy goodness */
justify-content: center; /* flexy goodness */
}
nav li+li:before {
content: " | "
}
nav li {
display: inline;
list-style-type: none;
border: solid 1px black;
margin: 20px 0px;
}
nav li a {
font-size: 18px;
}

<header>
<h1 style="line-height: 80px;">ABOUT MY COURSES</h1>
</header>
<nav>
<ul>
<li><a href="submissionDates.html">Submisson Dates</a></li>
<li><a href="courseTutors.html">Course Tutors</a></li>
<li><a href="classTimes.html">Class Times</a></li>
</ul>
</nav>
<p>Information on <b>submission</b> dates.</p>

Answer 2

在固定高度菜单的情况下最简单-我刚刚添加了与<nav>的高度相等的行高度，还有另一个更改-将<li>元素封装在<ul>中，您缺少了这个元素，它通常作为列表项的父元素，但应该在没有的情况下工作

你修改的jsfiddle

Answer 3

试试这个

<style type="text/css">
body{
background-color: salmon;}
header {
height:80px;
background-color:#C0504D;
color: white;
text-align: center; }
nav{
border-top: solid 2px white;
background-color: rgb(229,184,183);
text-align: center;
height: 80px;
vertical-align: middle;
display:flex;
flex-direction: row;
justify-content:space-evenly;
}
nav li + li:before{
content: " | "
}
nav li{
/*  display: inline; */
list-style-type: none;
border: solid 1px black;
margin: 20px 0px;
margin-top: auto;
margin-bottom: auto;


}
nav li a{
font-size: 18px;
}
</style>