vertical-align doesn't work properly

[onurcan1977]

Hi, I’m reading a book about css and this confused me. I’m trying to align my text vertically according to an image but it is aligned to bottom. Here’s my code:

    <title>Untitled Document</title>

    #mySpan {
        background-color: red;
        vertical-align: middle;
    }

    <p>
        <img src="zemin.jpg" alt="Zemin"> <span id="mySpan">Align Vertically</span>
    </p>

I tried setting width and height properties for all tags however it didn’t work. Can anyone help me?

[Beverleyh]

Try setting vertical-align on the img instead.

More info here https://css-tricks.com/almanac/properties/v/vertical-align/

[onurcan1977]

Hi, thanks for the reply. Yes it works now but I don’t understand why. How does setting position of the image affect separate span?

[Author]

Posts