应该如何将同一行的图像与 <nav> 标签的内容对齐？

Question

This image will make it easy to understand my problem
有什么方法可以使徽标图像与导航标签的其他内容完美对齐？

这是我的代码；

<nav>
<ul>
    <li><img id="nav_img" src="nav_img.png" alt="logo" title="nav_img"></li>
    <li><a href="#">Home</a> </li>
    <li><a href="#"> About</a></li>
    <li><a href="#"> Contact</a></li>
    <li><a href='#'> FAQ </a></li>
    <li><a href='#'> Download </a></li>
</ul>

Answer 1

您可以使用 flexbox 将您的徽标与列表项的其余部分垂直对齐，只需将您想要垂直居中的元素的父元素旋转，在您的例子中，就是 <ul> 到flexbox (display:flex;) 并指定要居中的子元素的垂直和水平对齐方式 (align-items: center; & justify-content:center;).

这会自动将您的子 <li> 元素更改为弹性项目并使它们垂直+水平对齐。

检查并运行以下 代码段 作为我上面描述的实际示例：

ul {display:flex; align-items: center;justify-content:center;list-style: none;}

<nav>
<ul>
    <li><img id="nav_img" src="https://picsum.photos/75/75" alt="logo" title="nav_img"></li>
    <li><a href="#">Home</a> </li>
    <li><a href="#"> About</a></li>
    <li><a href="#"> Contact</a></li>
    <li><a href='#'> FAQ </a></li>
    <li><a href='#'> Download </a></li>
</ul>
</nav>

Answer 2

尝试在 align-items 之后将 "justify-content: center;" 添加到您的 ul。

ul {
display:flex; 
align-items: center;
justify-content; center;
list-style: none;
}

编辑：将 align-items 和 justify-content 都设置为居中显示 flex 将使所有子项在两个轴上居中。

应该如何将同一行的图像与 <nav> 标签的内容对齐？

How should one align an image in the same line with the content of a <nav> tag?

html

css

nav