How to center a “position: absolute” element

Question

I\'m having a problem centering an element that has the attribute position set to absolute. Does anyone know why the images are not centered?

<

Answer 1

I'm not sure what you want to accomplish, but in this case just adding width: 100%; to your ul#slideshow li will do the trick.

Explanation

The img tags are inline-block elements. This means that they flow inline like text, but also have a width and height like block elements. In your css there are two text-align: center; rules applied to the and to the #slideshowWrapper (which is redundant btw) this makes all inline and inline-block child elements to be centered in their closest block elements, in your code these are li tags. All block elements have width: 100% if they are the static flow (position: static;), which is default. The problem is that when you tell li tags to be position: absolute;, you take them out of normal static flow, and this causes them to shrink their size to just fit their inner content, in other words they kind of "lose" their width: 100% property.