Vertical alignment with img and navlink/text with 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>

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.

are you looking for : `img {vertical-align:middle;}` or do you want the text on top of the image ? — G-Cyrillus, Feb 22 '20 at 16:27
Do you want the text to appear underneath the image, or actually on top of the image? — Run_Script, Feb 22 '20 at 16:34
there's a few possibilities : https://codepen.io/gc-nomade/pen/gOpLKEa — G-Cyrillus, Feb 22 '20 at 16:47

score 0 · Accepted Answer · answered Feb 22 '20 at 16:36

0

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>

answered Feb 22 '20 at 16:36

Akhil Aravind

5,741
16
35

I think the flex-direction was throwing me off, this is a simple answer, thank you for the snippet! – Ben Casalino Feb 22 '20 at 16:41

Vertical alignment with img and navlink/text with flexbox

1 Answers1