CODEWITHSUNDEEP
csstexticonsalignment
soulfreeza
soulfreeza

Reputation: 15

css align text with icon with

I want to align icon with text, view like screenshot below :

here's html source :

<a class="download" href="#">'.$dicon.'Download : ca dmv driving performance evaluation score sheet PDF</a>

here's $dicon source :

$dicon = '<img src="icon.png" width="25">';

here's css source :

.download{
        display:block;
        font-family:opensansitalic;
        text-transform: uppercase;
        vertical-align:baseline;
    }

Result:

enter image description here

Is my code wrong or anyway to fix it will be helpful.

Upvotes: 1

Views: 169

Answers (1)

Mr Lister
Mr Lister

Reputation: 46539

OK, I assume you want something like this?

enter image description here

If so, all you need is to vertical-align img to the middle.

.download img {vertical-align:middle;}

JSFiddle

The problem is that by default, images have vertical-align:baseline, that is, they are lined out with their bottom to the baseline of the text. With this one, they are aligned with their center to the center of the text. See also http://www.w3.org/wiki/CSS/Properties/vertical-align

Upvotes: 1

Related Questions