Vertical justify doesn't work

Question

I know this has been asked a thousand times but I find no simple solution there:

I do have that code a couple of times

<li>
    <a href="#">
        <img src="image_1.png">
        <span>Name 1</span>
    </a>
</li>

and I want to justify the span and the img-element vertically. Therefore I did

li span, li img{
    display:block;
    margin:auto 10px;
}

li img{
    width:20%;
    height:auto
}

but there is no effect at all. What do I do wrong there? What else could I do?

maybe try adding an absolute height (so using px) and using vertical align :) — treyBake, Apr 13 '18 at 14:59
Is this what you are trying to do? https://stackoverflow.com/questions/7273338/how-to-vertically-align-an-image-inside-a-div — Justin, Apr 13 '18 at 15:00

score 1 · Accepted Answer · answered Apr 13 '18 at 15:13

You can achieve this with flexbox: Is this what you're looking for

li span, li img{
    display:block;
    margin:0 10px;
}

li img{
}

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

<li>
    <a href="#">
        <img src="http://via.placeholder.com/350x150">
        <span>Name 1</span>
    </a>
</li>

1 Answers1