How can I vertically center my nav to the logo? - html

Question

I am trying to create a header bar with logo on the right, horizontal navigation on the left as usual. I need navigation items to be centered to the logo vertically.
I have tried several methods. I would appreciate if someone could show me the way around and explain why it worked, and what I was probably missing.
body {
max-width: 995px;
margin: 0 auto;
padding: 20px 0;
box-sizing: border-box;
font-family: 'Arial';
}
a {
text-decoration: none;
color: #222;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.logo img {
max-width: 235px;
height: auto;
float: left;
}
.menu li {
display: inline-flex;
padding-left: 30px;
}
.menu {
float: right;
}
.nav {
padding-bottom: 25px;
}
.group:after {
content: "";
display: table;
clear: both;
}
<div class="nav group">
<div class="logo"><img src="img/ahlogo.png" alt="Abdulla Hussain's Logo"></div>
<div class="menu">
<ul>
<li>About</li>
<li>Portfolio</li>
<li>Thoughts</li>
<li>Contact</li>
<li><i class="fa fa-facebook social" aria-hidden="true"></i></li>
</ul>
</div>
</div>
Thank you very much!

Answer 1

I suppose you want to align the navigation to the bottom end of the logo? If yes, you can use display:flex with the following settings on the parent element of both:
.nav.group {
display: flex;
justify-content: space-between;
align-items: flex-end;
}
body {
max-width: 995px;
margin: 0 auto;
padding: 20px 0;
box-sizing: border-box;
font-family: 'Arial';
}
.nav.group {
display: flex;
justify-content: space-between;
align-items: flex-end;
}
a {
text-decoration: none;
color: #222;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.logo img {
max-width: 235px;
height: auto;
float: left;
}
.menu li {
display: inline-flex;
padding-left: 30px;
}
.menu {
float: right;
}
.nav {
padding-bottom: 25px;
}
.group:after {
content: "";
display: table;
clear: both;
}
<div class="nav group">
<div class="logo"><img src="http://placehold.it/120x120/0af" alt="Abdulla Hussain's Logo"></div>
<div class="menu">
<ul>
<li>About</li>
<li>Portfolio</li>
<li>Thoughts</li>
<li>Contact</li>
<li><i class="fa fa-facebook social" aria-hidden="true"></i></li>
</ul>
</div>
</div>
Alternatives: If you want to center-align them vertically, change align-items: to center; (or to top for top alignment)
body {
max-width: 995px;
margin: 0 auto;
padding: 20px 0;
box-sizing: border-box;
font-family: 'Arial';
}
.nav.group {
display: flex;
justify-content: space-between;
align-items: center;
}
a {
text-decoration: none;
color: #222;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.logo img {
max-width: 235px;
height: auto;
float: left;
}
.menu li {
display: inline-flex;
padding-left: 30px;
}
.menu {
float: right;
}
.nav {
padding-bottom: 25px;
}
.group:after {
content: "";
display: table;
clear: both;
}
<div class="nav group">
<div class="logo"><img src="http://placehold.it/120x120/0af" alt="Abdulla Hussain's Logo"></div>
<div class="menu">
<ul>
<li>About</li>
<li>Portfolio</li>
<li>Thoughts</li>
<li>Contact</li>
<li><i class="fa fa-facebook social" aria-hidden="true"></i></li>
</ul>
</div>
</div>

Answer 2

This uses display:flex to set items in a line.
If you need to use browsers that do not support display:flex (I think IE<9) and you want a different way, let me know.
Open sans included because I like how it looks.
Orange used to demonstrate the middle-ness of the elements.
This will work if you know the height of the logo. If it is unknown, or perhaps changes height (a lot of places have navbars that shrink down a bit once the page scrolls) you may need a different solution.
#import url('https://fonts.googleapis.com/css?family=Open+Sans:400,700');
.nav {
display: flex;
background-color: orange;
margin: 0;
padding: 0;
height: 50px;
font-family: "Open Sans";
font-weight: bold;
justify-content: space-between;
}
.menu ul {
list-style: none;
margin: 0;
padding: 0;
}
.menu ul li {
display: inline-block;
padding: 5px 10px;
box-sizing: border-box;
line-height: 40px;
font-size: 20px;
}
.menu ul li:first-child {
margin-left: 10px;
}
.menu ul li a {
text-decoration: none;
}
<div class="nav group">
<div class="logo"><img src="//placehold.it/200x50" alt="Abdulla Hussain's Logo"></div>
<div class="menu">
<ul>
<li>About</li>
<li>Portfolio</li>
<li>Thoughts</li>
<li>Contact</li>
<li><i class="fa fa-facebook social" aria-hidden="true"></i></li>
</ul>
</div>
</div>