html - 使用 img 垂直对齐，使用 flexbox 进行导航链接/文本

Question

https://codepen.io/bencasalino/pen/GRJNGJe

<li class="navbar-link">
  <a href="#">
    <img class ="img" src="http://placekitten.com/200/300" alt="test"> CENTER THIS LINK VERTICALLY IN THE MIDDLE OF THE CAT PIC  </a>
</li>

我正在尝试将链接与图像垂直对齐。我的想法是使用 flexbox，但我将文本包装在 span 标签中，以便 flexbox 将其识别为子元素。不确定 HTML 的结构是问题还是使用 flexbox 不是答案。

Answer 1

Sice 您的图像和导航链接位于锚标记内，您可以为锚添加样式。检查片段

a{
  display:flex;
  align-items:center;
}

li{
  list-style:none
}
a{
  display:flex;
  align-items:center;
}

<li class="navbar-link">
  <a href="#">
    <img class ="img" src="http://placekitten.com/200/300" alt="test"> CENTER THIS LINK VERTICALLY IN THE MIDDLE OF THE CAT PIC  </a>
</li>