Use css to position an element in the center but with an offset

Question

I have a link with an image behind it, the image is supposed to be centered. I need to position the link AND image so they are in the horizontal center, but offset to the left by a number of pixels.

I have a fixed-width site which is centered in the middle of the page, these links must be in the same location regardless of screen resolution.

Here is an ascii drawing to help explain what I mean:

 ___________________________________
|           |           |           |
|           |           |           |
|           |           |           |
|           |<>         |           |
|           |<>         |           |
|           |<>         |           |
|           |           |           |
|           |           |           |
|           |           |           |
|___________|___________|___________|

The center part is where the site is.

The <> is a link, with an image behind it (via css).

The site is fixed-width in the center, just like above. How can I position the link and image elements like above?

The links are supposed to look like:

 ______________
<_____Text_____>

with the text centered both vertically and horizontally.

Thanks for your help!

Answer 1

You can use the dead centre technique to do what you want. If you look at the source, you'll see that you can use <div id="content"> to position your links as needed with an offset.

In there example, they position #content in the vertical center of the page by giving it a negative left margin that is equal to half its width. You would just need to play around with this negative left margin value to get the offset you're looking for.