[FIXED] How to VERTICALLY centered the logo on LEFT and navigation on RIGHT of the header?

Issue

I've been trying to solve this problem. What I want to learn is to know different ways to center the elements on navigation vertically, using semantic HTML. I want my logo on left and navigation on right.

I tried to use float on my nav element but the logo will break and will not be vertically centered. I used clearfix for that but I still can't find ways to vertically center both the logo and nav.

Will you please help me? And explain your answer please? Then if possible, can you please show me other ways of vertically centering the logo (left) and nav (right) using the exact format of my html?

Here's my code: https://codepen.io/yortz/pen/pQdKWd

HTML

  <!-- HEADER -->
  <header>
    <!-- LOGO -->
    <a href="#"><img id="site-logo" src="http://lorempixel.com/190/25/" alt="Bookworm"></a>
    <nav>
      <ul class="clearfix">
        <li><a href="#">About</a></li>
        <li><a href="#">Articles</a></li>
        <li><a href="#">News</a></li>
        <li><a href="#">Get in Touch</a></li>  
      </ul>
    </nav>
  </header>

CSS

* {
  box-sizing: border-box;
}

/* HIGHLIGHTING NAVIGATION ELEMENTS */
header {
  background-color: #ccc;
}
nav {
  background-color: aqua;
}

/* CENTERING NAVIGATION */
header {
  width: 100%;
}
#site-logo,
  nav {
  display: inline-block;
  vertical-align: middle;
}
nav ul {
  list-style-type: none;
  padding-left: 0;
}
nav ul li {
  display: inline-block;
}
nav ul li a {
  border: 1px solid red;
  padding: 10px 15px;
  display: block;
  text-decoration: none;
}
nav ul li a:hover {
  background-color: red;
  color: #fff;
}

/* CLEAR FLOATS */
.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

Please Help. Thank you!

Solution

I would use flexbox for the positioning in the nav

header {
   display: flex;
   justify-content: space-between; // pushes the logo to the left and the nav to the right
   align-items: center; // center aligns children of nav vertically
}

If you want to achieve something similar without using flexbox, you can position the logo absolutely:

header {
  position: relative; // with this all children can be positioned absolutely, relative to the header
  text-align: right; // this aligns the nav to the right of the header
}

header > a {
  position: absolute; // positions the logo absolute, relative to header
  top: 50%; // aligns the logo in the middle of the relative parent
  left: 0; // aligns the logo to the left edge of the relative parent
  transform: translateY(-50%); // changes the coordinates of the logo, to center it vertically (y-axis)
}

nav {
  text-align: left; // just used to reset the text-alignment in the nav elements
}

I would consider using a class instead of selecting the a-tag, for example <a class="logo" href="...">...</a> and then header .logo {...} in the CSS, instead of header > a {}. That is more future proof if you add more elements to the header.

Quick tip: If the logo is higher than the nav if will overflow the parent container, so you would need to modify the height of the parent to fix that. If you can guarantee, that the nav is always higher than the logo, this is not a problem for you and you can leave the height of the header untouched.

Answered By - Michael

Answer Checked By - David Goodson (PHPFixing Volunteer)