Centering text in a block element hyperlink

Trying to center text vertically that's in a hyperlink element with img

[tensai288]

Hi

Been trying to work this out for a few hours, i'm starting to think i'm missing the obvious.

I have a hyperlink that's a block element, this hyperlink has a background image that is larger than the element's width, so that when text is typed in, it will grow with the text. I also have an <img> in the hyperlink so that the right hand side looks finished (the image is like an arrow head).

I can't seem to center the text in this element.

Code:

CSS

a#moreaboutus{
background:url(images/more-about-us-background.png) no-repeat;
text-decoration:none;
font-size:14px;
background-position:left center;
font-weight:bold;
color:#D66634;
font-family:arial;
height:21px;
width:auto;
display:block;
float:left;
padding-left:10px;

}

HTML

<a id="moreaboutus" href="#">More about us <img src="images/more-about-us-arrow.png" /></a>

Any help would be appreciated

I've tried vertical-align and line-height to no avail...

BTW - adding padding-bottom:10px lines the text up nicely with the background image, but the <img> i have in the hyperlink raises above the rest.

[tensai288]

After further research I solved the issue using this
<snip>

my new code

a#moreaboutus{
background:url(images/more-about-us-arrow.png) no-repeat;
text-decoration:none;
font-size:14px;
background-position:top right;
font-weight:bold;
color:#D66634;
font-family:arial;
height:21px;
width:auto;
display:block;
float:left;
padding-right:10px;

}
a#moreaboutus span{
display:block;
background:url(images/more-about-us-background.png) no-repeat;
line-height:12px;
padding: 5px 6px 5px 6px;

}

<a id="moreaboutus" href="#"><span>More about us</span></a>

I didn't even consider using Span to do this before!

[edited by: DrDoc at 12:04 am (utc) on April 21, 2009]