Center vertically icone (img) followed by text in a row

Asked

Viewed 3,322 times

1

I want to put in a line an icon, 25x25px (which will also be a link) and a text and both have to be centered vertically, for this I tried this html:

<p>
    <a href="mailto:[email protected]" target="_blank">
        <img src="icons/25mail.png" />
    </a> [email protected]
</p>

and this css:

p {
    font-family: "Trebuchet MS";
    margin: 8px 0 5px 30px;
    font-size: 18px;
    line-height: 25px;
}

But the icone is a little higher in relation to the text, as I do to center both in relation to the height of the line?

html css

1 answer

2


What you need to adjust is the vertical-align of the image.

Try using this in your CSS:

img { vertical-align: text-bottom; }

Example without specifying vertical-align: http://jsfiddle.net/KZxab/1/
Example with vertical-align: text-bottom;: http://jsfiddle.net/KZxab/

You can even give a value in pixels, positive or negative if you want to move the image up or down respectively.

Example with vertical-align: -20px;: http://jsfiddle.net/KZxab/2/

  • 1

    It worked perfectly! Thank you very much!

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.