CODEWITHSUNDEEP
htmlcssimagewebalignment
Adam Waite
Adam Waite

Reputation: 18855

Align Image with text CSS

I can't understand why this text won't line up with the middle of an image. Check the screenshots below, one highlighted, one not:

image highlight

I want the word Australia to line up in the middle of the image (aligned with the arrow). As you see from the highlight it isn't the height of the image that is the problem.

I have tried vertical-align:middle which helps but as you can see it is not perfect!

Suggestions appreciated!

Upvotes: 0

Views: 377

Answers (1)

Diodeus - James MacFarlane
Diodeus - James MacFarlane

Reputation: 114347

If this is a link, use a CSS background. I'm guessing at the values below, but you can easily tweak them for your situation.

A.aus {
     background-image:url(../images/aus.png);
     background-position:0px 1px;
     display:block;
     height:40px;
     padding-left:60px;
     margin-top:3px;
     font-size:    ....etc.... 
}

Upvotes: 2

Related Questions