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

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

。标题部分>img
{
显示：内联块；
填充：10px；
背景颜色：黄色；
}
.navigation，.navigation.ul
{
列表样式：无；
}
航行
{
背景色：红色；
显示：内联块；
}
.navigation>li
{
显示：内联；
文本对齐：居中；
线高：50px；
}
.导航ul
{
显示：无；
}

为图像添加垂直对齐属性

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

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

。标题部分
{
溢出：隐藏；
}
.标题部分>img
{
浮动：左；
填充：10px；
背景颜色：黄色；
宽度：30px；
高度：30px；
}
航行
{
填充：0；
保证金：0；
浮动：左；
列表样式：无；
}
航行
{
背景色：红色；
}
.navigation>li
{
显示：内联；
文本对齐：居中；
线高：50px；
}
.导航ul
{
显示：无；
}

可能重复将您的徽标菜单等放入表格->td tag您的问题我不清楚，但我认为您需要添加

边距：0

对于

。导航

“等同于图像高度”没有为图像指定任何高度。徽标高度定义为30px垂直对齐。我将其应用于图像标记和列表标记。现在他们两人都站在同一条线上。但是还有别的办法吗？像不使用垂直对齐一样，我可以将列表和图像平均对齐在同一行上吗？