html – Vertical alignment with img and navlink/text with flexbox-ThrowExceptions

Exception or error:

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>

I’m trying to align the link vertically with the image. My thought was to use flexbox but I wrapped the text in a span tag so flexbox recognizes it as a child element. Not sure if the structure of the HTML is the issue or that using flexbox is not the answer.

How to solve:

Sice your image and nav link are inside the anchor tag, you can add style to anchor. Check the snippet

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>

Leave a Reply

Your email address will not be published. Required fields are marked *