Vertical alignment of anchor text

within a div with background replacement

[steve]

I'm pulling my hair out trying to vertically align some anchor text in a div as follows:

css:

.lhc #box a:link, #box a:visited {
display: block;
border: none;
width: 185px;
height: 185px;
margin:0 0 1em 0;
padding: 0;
font-size: 20px;
line-height: 30px;
color: #555;
text-decoration: none;
background: #ff6600 url(./img/box-background.gif) no-repeat left top;
text-align: left;
}
.lhc #box a:hover {
background-color: #ff9933;
background-position: right top;
}

html:

<div id="box">
<a href="#">Some anchor text</a>
</div>

The background image creates a mouseover effect.

I can't get the text to sit in the middle of the box. I've tried padding, margin and line height, but they all have unwanted side effects.

Any ideas?

/Steve

[marcel]

I think this is what you are looking for

.lhc #box
{
width: 185px;
height: 185px;
line-height: 185px;
text-align: center;
}

.lhc #box a:link, .lhc #box a:visited {
display: block;
border: none;
margin:0 0 1em 0;
padding: 0;
font-size: 20px;
color: #555;
text-decoration: none;
background: #ff6600 url(./img/box-background.gif) no-repeat left top;
text-align: left;
}

.lhc #box a:hover {
background-color: #ff9933;
background-position: right top;
}

[steve]

Thank you for your suggestion Marcel.

Unfortunately it hasn't helped! The anchor text still sits in the top right hand corner of the div.

Applying margins or borders to the anchor moves the background, I assume because I've declared the link as display:block

For instance:

.lhc #box a:link, .lhc #box a:visited {
padding: 30px 0 0 5px;
display: block;
font-size: 20px;
color: #555;
text-decoration: none;
background: #ff6600 url(./img/box-background.gif) no-repeat left top;
text-align: left;

Moves the text to where I want it, but it also moves the background image.

I thought applying a span to the anchor with padding might work, but this only affects the first line of text.

[steve]

Wrapping the anchor text in a span achieves the required effect (tested in IE7, Opera, & FF2):-

css:

.lhc #box {
width: 185px;
height: 185px;
padding-left: 2px;
padding-bottom: 18px;
}

.lhc #box a:link, .lhc #box a:visited {
display: block;
font-size: 20px;
color: #444;
text-decoration: none;
background: #ff6600 url(./img/box-background.gif) no-repeat left top;
text-align: left;
}

.lhc #box a:hover {
background-color: #ff9933;
background-position: right top;
}

.lhc #box .try {
display: block;
line-height: 1.75em;
padding: 40px 5px 40px 5px;
margin: 0;
}

html:

<div id="box">
<a href="#"><span class="try">This is some anchor text</span></a>
</div>

Now I'd like to eliminate the span if possible, is there any way to do this?

[Old_Honky]

What is CSS for .lhc #box? If you are giving a size to the anchor then the size and padding on the container (#box)will control it's position.

I tried the following changes and it seemed to do what you want. (Changed lines only shown)

.lhc #box a:link, #box a:visited {
margin:auto;
line-height: 900%;
}

[pageoneresults]

Any ideas?

Have you tried any of the vertical align options?

5.4.4 'vertical-align'
[w3.org...]

[steve]

If you are giving a size to the anchor then the size and padding on the container (#box)will control it's position

But the padding and margin will also apply to the background image, causing it to spill out of the div. It would be a lot easier without the background image!

Have you tried any of the vertical align options

Yes, but the background image was cut off, only showing through where there was text.

By using:-

.lhc #box .try {
display: block;
line-height: 1.75em;
padding: 40px 5px 40px 5px; <-- extra vertical padding
margin: 0;
}

with extra padding (40px) top and bottom all the background image is displayed.

This solution works in IE7, FF2 and Opera9 but I would still like to loose the non semantic <span> if possible.

[HarryM]

This is probably not what you want to hear, but there is always going to be a problem using background images in links. The image has a finite size, but the text is variable. Even if you get the links displaying pefectly, there will always be those browsers which you haven't tested them against, and anyway the links are likely to break if a user changes the browser text size.

[SuzyUK]

this is very easy if you are sure that the link text will only span one line.

you have the box set at 185x185 so I assume that is the image dimensions too?
setting the link to block and setting its line-height to 185px will vertically center 1 x line of text

display: table-cell; would do it, but for IE.. vertical centering is possible and there are various methods summarised here [webmasterworld.com]

but, I don't think any of those methods are perfect for text on a specific (non-tiling) background image, so to get the vertical centered text, block link (by which I mean being able to hover over any part of the 185x185 box) and image rollover together I would suggest using an "image replacement technique" and building the text into the image.

You can use the text in a hidden span if you want the link value, and it's an arguable accessibility feature to do so, but even if you don't, from an SEO POV with most menus "home", "about us" etc.. it's debatable whether it's worth it, and if that's the case maybe just use images with "alt" text for accessibility?

[steve]

This is probably not what you want to hear, but there is always going to be a problem using background images in links

it's debatable whether it's worth it, and if that's the case maybe just use images with "alt" text for accessibility?

After going for a walk and thinking about it, I'm ready to let go! It's so easy to get drawn into a complex solution when there is a simpler, more robust one staring you in the face.

Thank you both for the perspective, I'll add text to the image.

Steve

[HarryM]

Steve, don't overlook the other alternative which is to dispense with images, and use text-only links with CSS to add block styles (background colours, borders, margins, etc). They load a lot quicker than images.

One of the problems with image links is that they do not have link text which certain Search Engines may use. Text in an Alt or Title tag may not carry the same weight. Also if you put the text in an Alt or Title tag, and you have a big index, then you end up with a lot of Alt text. If this 'hidden text' is a large proportion of total text on the page, then it may trip a spam filter. Naturally, I have no proof of this. :)