Html 将ul与img对齐

我试图让我在

ul

中的链接与图像和文本对齐，这样我就可以拥有一个好的导航栏，但出于某种原因，它位于所有内容的下方。我怎样才能解决这个问题

正文{
保证金：0；
填充：0；
字体系列：“开放式Sans”，无衬线；
}
#标语{
字体：斜体；
}
导航{
背景色：白色；
-webkit盒阴影：0px 6px 7px-2px rgba（0,0,0,0.75）；
-moz盒阴影：0px 6px 7px-2px rgba（0,0,0,0.75）；
盒子阴影：0px 6px 7px-2px rgba（0,0,0,0.75）；
}
#标志{
填充：10px 10px 10px 10px；
垂直对齐：中间对齐；
}
锂，
a{
文字装饰：无；
列表样式类型：无；
颜色：黑色；
显示：内联块；
浮动：对；
}

实时、1对1、灵活且个性化

您希望将

#nav items

列表向右浮动，因为这是一个块元素。然后

在
li
上显示：内联块

，在

a

上显示

颜色

/

文本装饰

正文{
保证金：0；
填充：0；
字体系列：“开放式Sans”，无衬线；
}
#标语{
字体：斜体；
}
导航{
背景色：白色；
-webkit盒阴影：0px 6px 7px-2px rgba（0,0,0,0.75）；
-moz盒阴影：0px 6px 7px-2px rgba（0,0,0,0.75）；
盒子阴影：0px 6px 7px-2px rgba（0,0,0,0.75）；
}
#标志{
填充：10px 10px 10px 10px；
垂直对齐：中间对齐；
}
#导航项目{
浮动：对；
}
李{
显示：内联块；
}
a{
文字装饰：无；
颜色：黑色；
}

语言鸟
实时、1对1、灵活且个性化

将

显示：flex

应用于

导航

，为什么不将

浮动：right

也从

li

中删除

正文{
保证金：0；
字体系列：“开放式Sans”，无衬线；
}
#标语{
字体：斜体；
}
导航{
背景色：白色；
-webkit盒阴影：0px 6px 7px-2px rgba（0,0,0,0.75）；
-moz盒阴影：0px 6px 7px-2px rgba（0,0,0,0.75）；
盒子阴影：0px 6px 7px-2px rgba（0,0,0,0.75）；
显示器：flex；
对齐项目：居中；
}
#标志{
填充：10px；
}
保险商实验室{
左边距：自动；
}
锂，
a{
文字装饰：无；
列表样式类型：无；
颜色：黑色；
显示：内联flex；
}

实时、1对1、灵活且个性化

图像现在与文本不对齐。您的意思是什么？你看到我的片段了吗？你是否像我的回答那样使用了

align items:center

，