How can i vertically center an Unordered list which is inside a div?

Question

Below is my code, It's a navigation bar, All i want to do is center my inline list items vertically inside the nav bar.

<header class="header_wrapper">
  <div class="logo_container">
    <img src="./logo.png" alt="">
  </div>
  <div class="nav_container">
    <div class="helper">
      <div class="content">
        <ul class="nav_menu">
          <li>Home</li>
          <li>News</li>
          <li>Events</li>
          <li>Blog</li>
          <li>Contact</li>
        </ul>
      </div>
    </div>
  </div>
  <div class="search_container">

  </div>
</header>

This is my css

.header_wrapper{
  background:#d8d0d01a;
  display: flex;
}
.logo_container{
  width:20%;
}
.nav_container{
width:50%:
}

.search_container{
width:30%;
}

any idea on this ? Thanks

score 0 · Answer 1 · answered May 12 '18 at 16:06

You can try using flexbox's align-items property:

.nav_menu
{
    display: flex;
    align-items: center;
}

Note that this will only work properly if .nav_menu has flex-direction: row;, which is the default.

Also, this isn't related to your question, but conventionally, classes in CSS use hyphens instead of underscores (nav-menu instead of nav_menu).

score 0 · Answer 2 · answered May 12 '18 at 16:10

Add the following css to the class .nav_menu

.nav_menu{
 display: flex;
 justify-content:space-around;
 align-items:center;
}

.header_wrapper{
  background:#d8d0d01a;
 
}
.logo_container{
  width:20%;
}
.nav_container{
width:50%:
}

.search_container{
width:30%;
}

.nav_menu{
 display: flex;
 justify-content:space-around;
 align-items:center;
}

<header class="header_wrapper">
      <div class="logo_container">
          <img src="./logo.png" alt="">
      </div>
      <div class="nav_container">
        <div class="helper">
          <div class="content">
            <ul class="nav_menu">
              <li>Home</li>
              <li>News</li>
              <li>Events</li>
              <li>Blog</li>
              <li>Contact</li>
            </ul>
          </div>
        </div>
      </div>
      <div class="search_container">

      </div>
    </header>

score 0 · Answer 3 · answered May 12 '18 at 16:25

It is already vertically aligned, no?

.header_wrapper {
  background: #d8d0d01a;
  display: flex;
}

.logo_container {
  width: 20%;
}

.nav_container {
  width: 50%;
  border: 1px solid blue; /* Added for test */
}

.search_container {
  width: 30%;
}

.nav_menu{
  border: 1px solid red; /* Added for test */
}

.nav_menu li{
  display: inline; /* Added */
  border: 1px solid green; /* Added for test */
}

<header class="header_wrapper">
  <div class="logo_container">
    <img src="./logo.png" alt="">
  </div>
  <div class="nav_container">
    <div class="helper">
      <div class="content">
        <ul class="nav_menu">
          <li>Home</li>
          <li>News</li>
          <li>Events</li>
          <li>Blog</li>
          <li>Contact</li>
        </ul>
      </div>
    </div>
  </div>
  <div class="search_container">
  </div>
</header>

I only added the inline for the lis.

Well then if one of the elements on the side gets taller it won't be centered anymore — Rainbow, May 12 '18 at 16:52

How can i vertically center an Unordered list which is inside a div?

3 Answers3