'How to vertically align in img inside a span?

I am facing a problem:

I need to vertically align an img inside a span. I first thought on using vertical-align: middle but it doesn't properly do it.

I searched on StackOverflow and multiple people suggested using flexbox, but I cannot use it in this case since the line needs to still wrap text like shown here :

enter image description here

What kind of CSS voodoo is there to solve this ?

EDIT: Here's a CodePen, by using vertical-align: middle and Inspecting the element I can see that the bottom line is 1.45px taller than it should be, when I remove the images it becomes 32px as intended.

enter image description here

Thanks!

css


Solution 1:[1]

Try to add like this in span

span {
display:flex;
justify-content: center; 
align-items:center;
}

align-items is used for vertical alignment. If you had given any id to that span , you can use that.

Solution 2:[2]

hope this pen helps

this pure css library helps you align easily if you feel layout is messed up

main code

    display: flex;/*supports trick*/
    flex-direction: column;/*trick*/
  • flex-direction column makes it stack vertically one below another

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Mohit Maroliya B17CS036
Solution 2 Neptotech -vishnu

Related Questions