CSS: vertical align within divs that won't break IE and is scalable.

December 2, 2004 2:49 PM

CSS: vertical align within divs that won't break IE and is scalable. [mi]

So I'm not a guru, and I'm hoping I've missed something obvious, but this has been killing me for a few days now. I have a pair of links, and I'm doing css rollovers on link backgrounds... I also have some text in the anchor tags; if the anchors are, say, 100px by 100px, I want the text to display aligned to the anchor's bottom.

I've tried display: table-cell and then vertical-align: bottom, but ie doesn't recognize the former. I have looked at some solutions using a span to display the image, and having it be absolutely positioned, but that feels sloppy, and I'm not convinced it will work well. I could also use static font sizes and static positioning, but then if the user resized the text it would be forced out the bottom of the element. Is there anything I'm missing?

posted by cmyr to computers & internet (12 comments total)

I don't understand the notion of CSS being "scalable."

Maybe it's something similar to CSS being hot-swappable, real-time, up-to-the-minute, and out-of-the-box.
posted by xmutex at 3:03 PM on December 2, 2004

my terminology will be poor. When I say "scalable", I mean I would like the alignment to be maintained regardless of the height of the aligned element, ie not in pixels or points, etc.

I encourage you to suggest a better way of describing what I'm talking about.
posted by cmyr at 3:16 PM on December 2, 2004

cmyr: the term is relative (some people say proportional) units . As for what you want to do, I need to see a page. Do you mean that the link contains text and an image and that the a:hover has a different image state? What image replacement technique are you using? If the image is set as a background property than you align it differently than if it is an inline img... Either way, post a link to the actual site or to a mockup would make it a lot easier to figure out what is going on.
posted by Grod at 3:31 PM on December 2, 2004

That said, try defining the size of the anchor tag using padding on the text. padding-top: 2em that sort of thing, this will make the background image visible and keep the text at the bottom.
posted by Grod at 3:34 PM on December 2, 2004

I have an [a] element, set to display as a block. it's 100px by 100px. It has a background image. on a:hover, the background image changes. If I put text in between [a] and [/a], it will appear in the top left corner of the element. I would like it to appear in the bottom left corner. I understand putting the text in a span and using padding-top, but because the parent element is measured in absolute units, padding-top has the same problems as the other potential solutions; it aligns the top edge of the text instead of the bottom edge, so that if the user sets the browser to display a larger font, the difference is pushed outside of the element.


If I'm still being opaque I'll jerry rig some examples up.
posted by cmyr at 3:46 PM on December 2, 2004

Well, it's going to be a little gross, because CSS doesn't really support what you want to do (vertical alignment) inside an individual element. There are a few approaches I can think of, but you're going to need to nest a redundant element to make the solution scalable.

An example would be helpful, just to see exactly what you want to do.
posted by yerfatma at 3:56 PM on December 2, 2004

that was more or less what I needed to hear; I can think of quite a few ugly ways of doing what I want to do, it's just that they're ugly, and if it's going to be ugly I might rather just include the text in the image and make it a straight rollover.

two followup questions:

can I put [div] inside [a]?

if I include an image as the background for [a], is there anyway to define alt text?
posted by cmyr at 4:02 PM on December 2, 2004

Vertical Centering in CSS.
posted by Danelope at 4:15 PM on December 2, 2004

while I'm reading that link, here is a mockup showing my problem; I'd like to have the text of the links in the top right sit on that line.
posted by cmyr at 4:24 PM on December 2, 2004

Danelope has it. I was about to say the exact same thing.

No [div] inside [a]. You CAN do it, and it will probably work, but that doesn't make it semantically right. Instead, try putting a [span id="whatever"] inside the [a] and then using css to turn it into a block element (span#whatever{display: block;}). Now you can treat the [span] as if it were a [div].

For question B, you can always try something like this:

a#imagelink{background: url(foo.jpg);}
span#alttext{display: none;}
---
<a href="foo.html" id="imagelink">
<span id="alttext"> It was a picture of a kitten.</span>
</a>
posted by 4easypayments at 4:30 PM on December 2, 2004

Alright, I thought the positioning + negative margins thing wouldn't work because I can't be sure of the height of what I'm positioning.


I think I'll go with straight graphics.

4easy: what will make the span visible when graphics are disabled? I'm just curious on the mechanics.
posted by cmyr at 4:38 PM on December 2, 2004

cmyr--I think your original idea is on the right track. This is off the top of my head, but if you add "position:relative;" to the A tag, and "position: absolute; bottom: 0;" to the enclosed SPAN tag, you should be able to fine-tune how the text appears. You may also need to play around with the vertical-align attribute to get things just so when scaling the font sizes.

The whole "absolute inside relative" trick is a productive avenue to explore. When you define a block as having relative positioning (even if you don't shift it at all), it is taken out of the normal positioning flow, as is everything in it.

[later] OK, it's ugly, but it works. check it out.
posted by adamrice at 8:05 AM on December 3, 2004