Bottom centering images

[Superflu]

Hi guys, I need some help with this ...

I have 2 clickable images and I want them centered right next to each other, and on the bottom of the page, using CSS.

How should I do this? I can't seem to figure it out.

To clarify, this is the HTML (strict 1.0):

<div id="images">
<a href="#"><img alt="one" src="one.gif" /></a><a href="#"><img alt="two" src="two.gif" /></a>
</div>

Cheers!

[Atli]

Hey.

@Superflu
By which I assume you mean XHTML 1.0 strict? (The X makes a LOT of difference here)

Generally, to horizontally center something, you either use:

• text-align: center - On block level elements to center their contents.
• margin: 0 auto; - On block level elements to center themselves.

But that's the easy part.

If you want to pin it to the bottom, that gets a bit tougher. Do you want it fixed to the bottom of the window regardless of the size of the page (like the Facebook tools bar), or do you just want them trailing the content?

If it is the former, you would use position: fixed with bottom: 0px. If it is the latter... well, you just center it vertically and leave it at the end of the content in your HTML. - You can use JavaScript tricks to make it stick to the bottom when the window is higher than the content but to scroll down with it when the page grows. But that is beyond simple CSS rules. (At least as far as I know.)