CODEWITHSUNDEEP
htmlcssnavigationbar
rudicangiotti
rudicangiotti

Reputation: 566

How to vertically center all the elements inside a navigation bar?

Taking this example as starting point, I am trying to create a navigation bar with a left-aligned and a right-aligned section, ensuring vertical alignment into middle for all the elements inside it.
Unfortunately, the right part is not vertically centered, even if right-aligned and left-aligned classes have both the vertical-align: middle property set. What do I am missing? Here is the code bunch:

header img {
          display: inline-block;
        }
        header nav {
          display: inline-block;
          font-size: 1em;
          vertical-align: middle;
        }
        header nav ul {
          padding: 0;
          margin: 0;
        }
        header nav ul img {
          vertical-align: middle;
        }
        header nav li {
          display: inline-block;
        }
        header nav li a {
          display: inline-block;
          padding: .4em .8em;
      	  font-size: 1em;
      	  text-decoration: none;
      	  color: black;
          background: #eee;
      	  line-height: 1;
        }
        header .container {
          max-width: 800px;
          margin: auto;
          overflow: hidden;
        }
        .left-aligned {
          float: left;
        }
        .right-aligned {
          float: right;
        }
<html>
  <body>
    <header role="banner">
      <div class="container">
        <div class="left-aligned">
          <img class="left" src="http://placehold.it/200x200">
        </div>
        <div class="right-aligned">
          <nav id="navigation" role="navigation">
            <ul>
              <li>
                <img src="http://placehold.it/100x100">
                <a href="#" title="About Us">About Us</a>
              </li>
              <li><a href="#" title="Biographies">Biographies</a></li>
              <li><a href="#" title="Services">Services</a></li>
              <li><a href="#" title="Careers">Careers</a></li>
              <li><a href="#" title="Contact">Contact</a></li>
            </ul>
          </nav>
        </div>
      </div>
    </header>
  </body>
</html>

Upvotes: 0

Views: 411

Answers (1)

DannyXCII
DannyXCII

Reputation: 928

This is a great use case for flexbox - by adding the following three lines to your container class, you can achieve a left and right aligned section:

display: flex;
justify-content: space-between;
align-items: center;

So your final code will look like this (I've separated HTML and CSS for legibility):

header img {
      display: inline-block;
    }
    header nav {
      display: inline-block;
      font-size: 1em;
    }
    header nav ul {
      padding: 0;
      margin: 0;
    }
    header nav ul img {
      vertical-align: middle;
    }
    header nav li {
      display: inline-block;
    }
    header nav li a {
      display: inline-block;
      padding: .4em .8em;
      font-size: 1em;
      text-decoration: none;
      color: black;
      background: #eee;
      line-height: 1;
    }
    header .container {
      max-width: 800px;
      margin: auto;
      overflow: hidden;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
<header role="banner">
  
  <div class="container">
    
    <div class="left-aligned">
      <img class="left" src="http://placehold.it/200x200">
    </div>
    
    <div class="right-aligned">
      <nav id="navigation" role="navigation">
        <ul>
          <li>
            <img src="http://placehold.it/100x100">
            <a href="#" title="About Us">About Us</a>
          </li>
          <li><a href="#" title="Biographies">Biographies</a></li>
          <li><a href="#" title="Services">Services</a></li>
          <li><a href="#" title="Careers">Careers</a></li>
          <li><a href="#" title="Contact">Contact</a></li>
        </ul>
      </nav>
    </div>
    
  </div>
  
</header>

This justifies the direct children of the flexbox to horizontally align left and right with space in between. If more than two elements were to exist, they would be placed with equal spacing across the width of the container.

Align items will determine the vertical alignment of elements inside the flexbox.

This is true when flex-direction is not set (default value - row). When flex-direction is set to column, the "axis" affected by justify and align are reversed.

Upvotes: 1

Related Questions