Inline horizontal spacer in HTML

Question

I am making a Web page with a slideshow, using the same technique used on http://zine.pocoo.org/. The person I'm making the site for wants the slideshow to be centered. However, some of the photos are portrait layout and some are landscape. (This was not my choice.) I need a position: absolute to get the li's containing the items in the right place, so centering them does not work. (At least, not by normal methods.)

So, I thought that it might work to insert a 124-pixel "spacer" before the image on the portrait pictures. I tried it with a <span style="width: 124px;">&nbsp;</span>, but it only inserts a single space, not the full 124 pixels. The slideshow fades in and out OK, though, so I think that it would work if I could get the proper spacing.

My question is this: does anyone know a way to have 124px of space inline in HTML (preferably without using images), or another way to center the pictures in the li items?

Answer 1

I think you need to add margin-left instead of padding-left, because the margin is outside an element, and the padding is inside.

Answer 2

Try to avoid putting large spacers on elements and especially on multiple elements. The only way to add a spacer on your element would be relative positioning or an inline-block element (use carefully.)

Your best bet for the slideshow is to have a relative positioned <ul>. Since the <ul> is relative positioned you can set the <li>s to be position:absolute; within the <ul>. At this point you can set the <li>s to width:100%; and text-align:center; so that anything inside is positioned in the horizontal center (vertical centering in CSS2 is tricky.) Check out http://jquery.malsup.com/cycle/ which outputs inline styling by default but is still really nice.