Vertically center icon (img) followed by text in a line

Navigation
1

I want to put a 25x25px icon (which will also be a link) and a text and both have to be centered vertically, so 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 icon is a bit higher in relation to the text, how do I centralize both in relation to the height of the line?

    
asked by anonymous 14.05.2014 / 23:10

1 answer

2

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

Test using this in your CSS: 

img { vertical-align: text-bottom; }

Example without specifying vertical-align : link
Example with vertical-align: text-bottom; : link

You can even give a value in pixels, positive or negative if you want to raise or lower the image.

Example with vertical-align: -20px; : link

    
14.05.2014 / 23:16
Error while running in Xcode 6 an app created in Xcode 5 Print arrays with line break