img 垂直对齐，flexbox 垂直对齐 navlink/text

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>

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

Answer 1

如果您的图片和导航 link 位于锚标签内，您可以为锚添加样式。检查片段

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>

img 垂直对齐，flexbox 垂直对齐 navlink/text

Vertical alignment with img and navlink/text with flexbox

html

css

anchor

vertical-alignment

flexbox