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

Question

This image will make it easy to understand my problem
有什么方法可以使 Logo 图像与导航标签的其他内容完美地在同一行吗？

这是我的代码；

<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 将 Logo 与列表项的其余部分垂直对齐，只需转动要垂直居中的元素的父元素(在您的情况下为 <ul>)到 Flexbox ( display:flex; ) 并指定其子元素的垂直和水平对齐方式居中 ( align-items: center; & justify-content:center; )。

这将自动更改您的 child <li>元素来 flex 元素并将它们垂直+水平对齐。

---

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

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>