How to align logo next to navigation? - html

Question

This is what it looks like:
How would I correctly vertically align the navigation with the logo?
HTML:
<div class="menu-nav">
<ul>
<li>Logo</li>
<li>Home</li>
<li>Chat Now</li>
<li>Mobile Chat</li>
<li>Report User</li>
</ul>
</div>
CSS:
.menu-nav {
}
.menu-nav ul li {
display: inline-block;
}
.menu-nav ul li a{
color: #fff;
margin: 10px;
}
.menu-nav ul a.mg {
}
.menu-nav ul li a.logo {
background: url("../img/logo.png") no-repeat;
text-indent: -9999px;
height:60px;
display:block;
width:215px;
padding: 0;
}

Answer 1

You can add a display method named table to the ul tag and then include a display method table-cell with vertical-align:middle to effectively, vertically align your links to the logo.
HTML:
<div class="menu-nav">
<ul class="a">
<li>Logo
</li>
<li class="navItem">Home
</li>
<li class="navItem">Chat Now
</li>
<li class="navItem">Mobile Chat
</li>
<li class="navItem">Report User
</li>
</ul>
</div>
CSS:
.a{
display:table;
}
.a li{
display: table-cell;
vertical-align:middle;
}
Which is better seen through this JSFiddle
EDIT:
You can update your margin by giving the li tags a class and calling that specific class. This can also be found in the JSFiddle above and you can play with it a bit as well.

Answer 2

Please try below code i have just added line-height:60px; for .menu-nav ul li a
HTML :
<div class="menu-nav">
<ul>
<li>Logo</li>
<li>Home</li>
<li>Chat Now</li>
<li>Mobile Chat</li>
<li>Report User</li>
</ul>
</div>
CSS:
.menu-nav {
}
.menu-nav ul li {
display: inline-block;
}
.menu-nav ul li a{
color: #fff;
margin: 10px;
line-height:60px;
}
.menu-nav ul a.mg {
}
.menu-nav ul li a.logo {
background: url("../img/logo.png") no-repeat;
text-indent: -9999px;
height:60px;
display:block;
width:215px;
padding: 0;
}