I'm looking to vertically align my text with my logo in a seamless manner. However, whenever I adjust the line height, it affects the positioning of my logo as well. Is there a way to only modify the text position while keeping the logo centered? Check out the code below.
HTML
<div id="wrapper">
<div id="header">
<div id="nav">
<ul>
<li> dfgkdfjg </li>
<li><img src="http://i.imgur.com/d0umnxt.png" /></li>
<li> pfopkp </li>
</ul>
</div>
</div>
</div>
CSS
body {
margin: 0px;
}
#header {
display: table;
width: 100%;
height: 100px;
background-color: #151B1F;
}
#nav {
display:table-cell;
vertical-align:middle;
text-align:center;
}
#nav li {
margin-left: 50px;
margin-right: 50px;
display:inline;
}