Align Image And List On Same Line In Html

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 i

Solution 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;
}
.navigationul
{
    display:none;
}

<!--Header section--><divclass="header-section"><imgsrc="images/logo/logo.png"><!--Navigation section--><ulclass="navigation"><li><ahref="#">Home</a></li><liclass="sub-menu"><ahref="#">About &#x25BC;</a><ul><li><ahref="#">The Company</a></li><li><ahref="#">The Founders</a></li><li><ahref="#">The Team</a></li><li><ahref="#">The Mission</a></li></ul></li><liclass="sub-menu"><ahref="#">Products  &#x25BC;</a><ul><li><ahref="#">Solar Panels</a></li><li><ahref="#">Solar Lamps</a></li><li><ahref="#">Solar Heaters</a></li><li><ahref="#">Solar Cookers</a></li></ul></li><liclass="sub-menu"><ahref="#">Services &#x25BC;</a><ul><li><ahref="#">Solar Equipment Repair</a></li><li><ahref="#">Installation</a></li><li><ahref="#">Maintenance</a></li><li><ahref="#">Training</a></li></ul></li><liclass="sub-menu"><ahref="#">Support &#x25BC;</a><ul><li><ahref="#">Training</a></li></ul></li><liclass="sub-menu"><ahref="#">Contact &#x25BC;</a><ul><li><ahref="#">Email Us</a></li><li><ahref="#">Contact Form</a></li></ul></li></ul><!--Social Icons--><imgsrc="images/icons/twitter.png"><imgsrc="images/icons/facebook.png"><imgsrc="images/icons/google-plus.png"></div><!--Header section closed-->