Align image and list on same line in html - html

Question

Currently I am trying to create a header section in HTML, which contains a logo image and a list which is being used as a navigation menu.
The problem which I am facing right now is that, when I am giving a certain height to the list(equivalent to image height) the height of the list is going downwards against the image, and I want to be on the same line and text of the list in the middle. The following is the code snippet of my 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>Home</li>
<li class="sub-menu">
About ▼
<ul>
<li>The Company</li>
<li>The Founders</li>
<li>The Team</li>
<li>The Mission</li>
</ul>
</li>
<li class="sub-menu">
Products ▼
<ul>
<li>Solar Panels</li>
<li>Solar Lamps</li>
<li>Solar Heaters</li>
<li>Solar Cookers</li>
</ul>
</li>
<li class="sub-menu">
Services ▼
<ul>
<li>Solar Equipment Repair</li>
<li>Installation</li>
<li>Maintenance</li>
<li>Training</li>
</ul>
</li>
<li class="sub-menu">
Support ▼
<ul>
<li>Training</li>
</ul>
</li>
<li class="sub-menu">
Contact ▼
<ul>
<li>Email Us</li>
<li>Contact Form</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-->

Answer 1

Add a vertical-align attribute to your images
.header-section > img
{
display:inline-block;
padding:10px;
background-color:yellow;
vertical-align: middle;
}
Update : Float version
Add a "float left" attribute to your images and .navigation and set an image "height + padding" equal to the line-height of your 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>Home</li>
<li class="sub-menu">
About ▼
<ul>
<li>The Company</li>
<li>The Founders</li>
<li>The Team</li>
<li>The Mission</li>
</ul>
</li>
<li class="sub-menu">
Products ▼
<ul>
<li>Solar Panels</li>
<li>Solar Lamps</li>
<li>Solar Heaters</li>
<li>Solar Cookers</li>
</ul>
</li>
<li class="sub-menu">
Services ▼
<ul>
<li>Solar Equipment Repair</li>
<li>Installation</li>
<li>Maintenance</li>
<li>Training</li>
</ul>
</li>
<li class="sub-menu">
Support ▼
<ul>
<li>Training</li>
</ul>
</li>
<li class="sub-menu">
Contact ▼
<ul>
<li>Email Us</li>
<li>Contact Form</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-->