CODEWITHSUNDEEP
htmlcss
Irishgirl
Irishgirl

Reputation: 751

Vertical align text with icon

I've a text as below is not aligning as vertical in the middle of icon.

How do I solve this, please?

align top http://www.kerrydeaf.com/ali.png

CSS:

#text{ color:#48c4d2; font-size:15px; font-family:opensansitalic;}

HTML:

<div class="blurb"><button class="blue_small" id="blue_small"></button> Available in video.</div>

UPDATE:

This should explain it.

align top http://www.kerrydeaf.com/ali2.png

Upvotes: 0

Views: 1825

Answers (2)

Diodeus - James MacFarlane
Diodeus - James MacFarlane

Reputation: 114347

You should be using a CSS background image and use padding-left: to move the text over, and use background-position: to adjust the position of the image. And if it's a link, use an A-tag, not a button.

<a href="..." class="videoBlurb">Available in video.</a>

No need to nest tags as you're doing.

Something like:

.videoBlurb {
    display:block;
    background-image:url(....);
    background-repeat:no-repeat;
    background-position:0px 0px;
    padding-left:40px;
    padding-top:20px;
    color:#48c4d2;
    font-size:15px;
    font-family:opensansitalic;
}

Upvotes: 1

No Results Found
No Results Found

Reputation: 102735

Diodeus makes a good point and definitely has the most useful answer, but for the sake of curiosity without changing your markup - it should actually be this simple:

​button {
    vertical-align:middle;
}

Of course, be more specific with the selector. Demo: http://jsfiddle.net/beV7j/2

Upvotes: 1

Related Questions