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

Question

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!

Answer 1

Lots of answers already. This is mine. I'm putting the logo inside the <ul> as a li element. I'm making the <ul> a flex container and the most important: margin:auto to the right for the first list item.

nav ul li:first-child {
 margin:0 auto 0 0
}

* {
  box-sizing: border-box;
}




/* HIGHLIGHTING NAVIGATION ELEMENTS */
header {
background-color: #ccc;
}
nav ul {
	background-color: aqua;
  display:flex; 
}
nav ul li a{height:47px;}


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



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

      <!-- HEADER -->
      <header>
        <!-- LOGO -->
        
        <nav>
          <ul class="clearfix">
            <li><a href="#"><img id="site-logo" src="http://lorempixel.com/190/25/" alt="Bookworm"></a></li>
            <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>

Answer 2

You need to modify your code like this:

* {
  box-sizing: border-box;
}

/* HIGHLIGHTING NAVIGATION ELEMENTS */
header {
background-color: #ccc;
}
nav {
    background-color: aqua;
}
/* CENTERING NAVIGATION */
header {
    width: 100%;
      display: table;
    vertical-align: middle;
}
.logo-wrapper{
  display: table-cell;
    vertical-align: middle;
}
#site-logo{
  display: inline-block;
  vertical-align: middle;
}
nav{
  display: table-cell;
    float: right;
}
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;
}

And then edit HTML anchor tag like this:

<a href="#" class="logo-wrapper"><img id="site-logo" src="http://lorempixel.com/190/25/" alt="Bookworm"></a>

Answer 3

hope this will help. I had few changes in your jfiddle link and pasted it here. just css changes.

    * {
  box-sizing: border-box;
}

/* HIGHLIGHTING NAVIGATION ELEMENTS */
header {
background-color: #ccc;
 width:100%;
  display:block;
}
nav {
}




/* CENTERING NAVIGATION */
header {
    width: 100%;
}
#site-logo{
  display:inline-block;
  vertical-align:middle;
    width:calc(20% - 2px);
}
nav {
  display: inline-block;
  vertical-align: middle;
  position:relative;
  width:calc(80% - 2px);

}
nav ul {
  list-style-type: none;
  padding-left: 0;
  display:inline-block;
  position:relative;
  left:76%;
  background-color: aqua;
}
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;
}

Answer 4

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.

Answer 5

If you want to center the elements vertically, you can use align-content with display: flex.

Answer 6

Using float left and right and giving padding to logo for vertical align center

* {
  box-sizing: border-box;
}

/* HIGHLIGHTING NAVIGATION ELEMENTS */
header {
background-color: #ccc;
}
.logo{
  float:left;
}
.logo img{
  padding:24px 10px;
}
nav {
	background-color: aqua;
  float:right;
}

.clearfix{
  clear:both;
}

/* 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;
}

      <!-- HEADER -->
      <header>
        <!-- LOGO -->
        <a href="#" class="logo"><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>
        <div class="clearfix"></div>
      </header>