How do i center align this in XHTML 1.0 Strict?

[Major Disaster]

Hi,

I have the following code that displays some images next to each other in a neat row. I want the images themselves to be centrally aligned in this row (at the moment they are left aligned).

Ive tried putting them in a <div>, <p>, margin-left:auto etc, and it either seems to not work or not validate. Ive searched loads and see this is a popular topic, but still cant get an answer.

So whats the correct way to align the images in code below (in XHML 1.0 Strict)?

<ul class="images">
<li><a href="#"><img src="img/products/small1.png" alt="example image" class="thumb" /></a></li>
<li><a href="#"><img src="img/products/small2.png" alt="example image" class="thumb" /></a></li>
<li><a href="#"><img src="img/products/small3.png" alt="example image" class="thumb" /></a></li>
<li><a href="#"><img src="img/products/small4.png" alt="example image" class="thumb" /></a></li>
</ul>

Thanks for any help

[swa66]

You'll need to make sure:

• to get width on what you want to center
  (the block of the <ul> is likely as wide as it's parent, so centering it will not yield much difference, you need to shrink it to what it contains in order to center the contents).
  
• to make both the left and right margin "auto"
  

Try posting some CSS to go along with your xhtml

Alternatively see SuzyUK's port on display-inline being usable cross browser now and use text-align:center on the parent.

[Setek]

If you've made the

<li>

s display inline in order to display them in row, and the anchors or images aren't set to display block or floated in any way (as in, everything is displayed inline) you can simply set

text-align: center;

on the

<ul>

:)

[Major Disaster]

Thanks for the reply.

Sorry for my delay in replying, i dont wish to seem ungrateful but ive been having bigger problems with the same code and have kinda forgotten about this.

Judging by the quality of the responses, you may see me post my bigger problem some time soon if i cant figure it out...