css - Align image and list on same line in html -

currently trying create header section in html, contains logo image , list being used navigation menu. problem facing right that, when giving height list(equivalent image height) height of list going downwards against image, , want on same line , text of list in middle. following code snippet of page.

.header-section>img  {      display:inline-block;      padding:10px;      background-color:yellow;  }  .navigation,.navigation ul  {      list-style:none;  }  .navigation  {      background-color:red;      display:inline-block;  }  .navigation>li  {      display:inline;      text-align:center;      line-height:50px;  }    .navigation ul  {      display:none;  }

<!--header section-->  <div class="header-section">  	<img src="images/logo/logo.png" alt="logo" width="90px" height="30px">  	<!--navigation section-->  	<ul class="navigation">  		<li><a href="#">home</a></li>  		<li class="sub-menu">  			<a href="#">about &#x25bc;</a>  			<ul>  				<li><a href="#">the company</a></li>  				<li><a href="#">the founders</a></li>  				<li><a href="#">the team</a></li>  				<li><a href="#">the mission</a></li>  			</ul>  		</li>  		<li class="sub-menu">  			<a href="#">products  &#x25bc;</a>  			<ul>  				<li><a href="#">solar panels</a></li>  				<li><a href="#">solar lamps</a></li>  				<li><a href="#">solar heaters</a></li>  				<li><a href="#">solar cookers</a></li>  			</ul>  		</li>  		<li class="sub-menu">  			<a href="#">services &#x25bc;</a>  			<ul>  				<li><a href="#">solar equipment repair</a></li>  				<li><a href="#">installation</a></li>  				<li><a href="#">maintenance</a></li>  				<li><a href="#">training</a></li>  			</ul>  		</li>  		<li class="sub-menu">  			<a href="#">support &#x25bc;</a>  			<ul>  				<li><a href="#">training</a></li>  			</ul>  		</li>  		<li class="sub-menu">  			<a href="#">contact &#x25bc;</a>  			<ul>  				<li><a href="#">email us</a></li>  				<li><a href="#">contact form</a></li>  			</ul>  		</li>  	</ul>  	<!--social icons-->  	<img src="images/icons/twitter.png">  	<img src="images/icons/facebook.png">  	<img src="images/icons/google-plus.png">  </div>  <!--header section closed-->

add vertical-align attribute images

.header-section > img {     display:inline-block;     padding:10px;     background-color:yellow;     vertical-align: middle; } 

update : float version
add "float left" attribute images , .navigation , set image "height + padding" equal line-height of list.

.header-section  {    overflow: hidden;  }  .header-section > img  {      float: left;      padding:10px;      background-color:yellow;      width: 30px;      height: 30px;  }  .navigation  {      padding: 0;      margin: 0;      float: left;      list-style:none;  }  .navigation  {      background-color:red;  }  .navigation > li  {      display:inline;      text-align:center;      line-height:50px;  }  .navigation ul  {      display:none;  }

<!--header section-->  <div class="header-section">  	<img src="images/logo/logo.png">  	<!--navigation section-->  	<ul class="navigation">  		<li><a href="#">home</a></li>  		<li class="sub-menu">  			<a href="#">about &#x25bc;</a>  			<ul>  				<li><a href="#">the company</a></li>  				<li><a href="#">the founders</a></li>  				<li><a href="#">the team</a></li>  				<li><a href="#">the mission</a></li>  			</ul>  		</li>  		<li class="sub-menu">  			<a href="#">products  &#x25bc;</a>  			<ul>  				<li><a href="#">solar panels</a></li>  				<li><a href="#">solar lamps</a></li>  				<li><a href="#">solar heaters</a></li>  				<li><a href="#">solar cookers</a></li>  			</ul>  		</li>  		<li class="sub-menu">  			<a href="#">services &#x25bc;</a>  			<ul>  				<li><a href="#">solar equipment repair</a></li>  				<li><a href="#">installation</a></li>  				<li><a href="#">maintenance</a></li>  				<li><a href="#">training</a></li>  			</ul>  		</li>  		<li class="sub-menu">  			<a href="#">support &#x25bc;</a>  			<ul>  				<li><a href="#">training</a></li>  			</ul>  		</li>  		<li class="sub-menu">  			<a href="#">contact &#x25bc;</a>  			<ul>  				<li><a href="#">email us</a></li>  				<li><a href="#">contact form</a></li>  			</ul>  		</li>  	</ul>  	<!--social icons-->  	<img src="images/icons/twitter.png">  	<img src="images/icons/facebook.png">  	<img src="images/icons/google-plus.png">  </div>  <!--header section closed-->