在html中将图像和列表对齐在同一行

Question

目前我正在尝试在HTML中创建标题部分，其中包含徽标图像和用作导航菜单的列表。 我现在面临的问题是，当我给列表一定高度（相当于图像高度）时，列表的高度向下对着图像，我想要在同一行和文本上在中间的名单。以下是我页面的代码片段。

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

Answer 1

为图像添加vertical-align属性

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

更新：浮动版本
在图像和.navigation中添加“float left”属性，并将图像“height + padding”设置为等于列表的行高。

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