使用 flexbox 垂直对齐 img 和 navlink/text [重复]答案

【问题标题】：Vertical alignment with img and navlink/text with flexbox [duplicate]使用 flexbox 垂直对齐 img 和 navlink/text [重复]
【发布时间】：2020-06-06 18:38:47
【问题描述】：

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 不是答案。

【问题讨论】：

您是在寻找：img {vertical-align:middle;} 还是想要图片顶部的文字？
您希望文本显示在图像下方还是实际显示在图像顶部？
有几种可能：codepen.io/gc-nomade/pen/gOpLKEa

标签： html css flexbox anchor vertical-alignment

【解决方案1】：

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

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>

【讨论】：

我认为 flex-direction 让我失望了，这是一个简单的答案，谢谢你的 sn-p！