List li and CSS

[dtm32236]

Hey guys,

I'm having trouble aligning some elements here:

<ul class="other_AIOs">
<li style="width:99%;"><span style="border-bottom:1px dotted #666;">Other All-in-One Toilets:</span></li>
<li style="clear:both;"><a href="all-in-one_toilets_AIO1000EW.html"><img src="images/50x50_all-in-one_AIO1000EW.jpg" alt="Model AIO1000EW"><br>1000 Gram<br>Elongated</a></li>
<li><a href="all-in-one_toilets_AIO1000RW.html"><img src="images/50x50_all-in-one_AIO1000RW.jpg" alt="Model AIO1000RW"><br>1000 Gram<br>Round</a></li>
<li><a href="all-in-one_toilets_AIO800EW.html"><img src="images/50x50_all-in-one_AIO800EW.jpg" alt="Model AIO800EW"><br>800 Gram<br>Elongated</a></li>
<li><a href="all-in-one_toilets_AIO800RW.html"><img src="images/50x50_all-in-one_AIO800RW.jpg" alt="Model AIO800RW"><br>800 Gram<br>Round</a></li>
<li><a href="all-in-one_toilets_AIO400RW.html"><img src="images/50x50_all-in-one_AIO400RW.jpg" alt="Model AIO400RW"><br>400 Gram<br>Round</a></li>
<li><a href="all-in-one_toilets_AIO250RW.html"><img src="images/50x50_all-in-one_AIO250RW.jpg" alt="Model AIO250RW"><br>250 Gram<br>Round</a></li>
</ul>

CSS:
.other_AIOs li {display:inline; float:left; text-align:center; width:48%; margin-bottom:10px;}
.other_AIOs li img {display:block; border:1px solid #999;}

The text used to be centered under the images, and now they're not - I can't figure out why.. If you see on this page:
http://www (dot) foremostgroups (dot) com/dev/2007corporate/K&B/vitreous_china/all-in-one_toilets_AIO1000EW.html
You'll notice under the toilet image, there's the "Other All-in-One Toilets:" thing. This is what I'm referring to. The images and text should be centered.

Can anyone see why they're not? Maybe it has something to do with display:inline; but i've done it like this before, and it used to work fine (I think).

Thanks a lot for any help.

[WebJoel]

<style>
.other_AIOs {width:130px; height:auto;}
.other_AIOs li {text-align:center; list-style-type:none; margin:0; padding:0;}
.other_AIOs a {background-color:wheat;display:block;}
</style>

Without being able to view the images, this might require tweaking. It meets the request though (centered text under image)

[dtm32236]

thanks WebJoel,

but as soon as I remove the width:130px; it goes back to normal (i need it about 288px wide, and as soon as I do that, I get the same issues I've been getting).

it's weird... i had this working before perfectly, and i guess I changed something, now i can't get it back to normal.

[dtm32236]

i got it!

i set the images to display:block; margin:0 auto;