How can I vertically align list items in a nav element?

Question

I am trying to vertically align the 3 "li" in the centre of "nav". However, the "li" keep sticking to the top of the "nav", I have tried setting a margin for "li", the only things that changed are the sizes of their borders.

<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 demo

You are right, I have put the "li" into a "ul" and worked from there. Thanks — Pak, Oct 20 '20 at 20:14
No problem. Please [take the tour](https://stackoverflow.com/tour) so you know what to do next. — isherwood, Oct 20 '20 at 20:14

score 0 · Answer 1 · answered Oct 20 '20 at 20:11

Flexbox is often the simplest way to happiness...

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>

score 0 · Answer 2 · answered Oct 20 '20 at 20:38

simplest in Your case with fixed height menu - I just added line-height that is equal to height for <nav>, also one other change - encapsulated <li> elements inside <ul>, you are missing this element that is usual as parent element for list items, but should work without

your modified jsfiddle

score -1 · Answer 3 · answered Oct 20 '20 at 20:14

Try this

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

How can I vertically align list items in a nav element?

3 Answers3