Lalit Pal February 2016

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 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><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>&l        

Answers


smdsgn February 2016

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><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 

Post Status

Asked in February 2016
Viewed 1,216 times
Voted 10
Answered 1 times

Search




Leave an answer