我无法在锚标记中垂直对齐图标

Question

我想在这个nav-bar中对齐图标。我试着将它们与flexbox、垂直对齐等对齐。我尝试了所有方法，但似乎都不起作用。我应该重写列表中的代码吗？

当前代码如下：

.nav-bar {
display: flex;
flex-direction: column;
position: relative;
}

<div class="container">
<div class="nav-bar">
<img src="assets/Ics/....svg"><a routerLink="..">Car</a>
<img src="assets/Ics/...svg"><a routerLink="..">Make</a>
<img src="assets/Ics/...svg"><a routerLink="..">About</a>
</div>
</div>

Answer 1

您需要将img和anchor标记保存在具有align-items属性的flex容器中``

.nav-bar div {
display: flex;
align-items: center;
}

<div class="nav-bar">
<div><img src="assets/Ics/....svg"><a routerLink="..">Car</a></div>
<div><img src="assets/Ics/...svg"><a routerLink="..">Make</a></div>
<div><img src="assets/Ics/...svg"><a routerLink="..">About</a></div>
</div>

Answer 2

是的，你可以像下面的一样使用li标签

<div class="container">
<div class="nav-bar">
<ul style="list-style: none;">
<li><img src="assets/Ics/....svg" ><a routerLink="..">Car</a></li>
<li><img src="assets/Ics/...svg"><a routerLink="..">Make</a></li>
</ul>
</div>
</div>