Centering in CSS

[reybango]

I'm trying to get some images centered but I can't for the life of me figure it out. Here's the code that I derived from the The CSS Anthology book:

<style type="text/css">
#suggestlist {
list-style-type: none;
}

#suggestlist li {
float: left;
margin-right: 6px;
margin-bottom: 10px;
font: bold 0.8em Arial, Helvetica, sans-serif;
color: #333333;
display: block;
border: 1px solid #333300;
width: 150px;
height : 180px;
background-color : White;
}
</style>

<table width="480" border="1" cellspacing="0" cellpadding="0">
<tr>
<td>
<ul id="suggestlist">
<li><img src="/image/products/thumb-take_exp_32_med8.jpg" alt="" border="0"></li>
<li><img src="/image/products/thumb-Take_32oz_cream_med4.jpg" alt="" border="0"></li>
</ul>

</td>
</tr>
</table>

Help!

Rey...

[holyhttp]

You can use the "text-align:center;" rule to horizontally align the content of a block element.
"vertical-align:middle;" can also be use to align the content vertically:

#suggestlist li {
text-align:center;
float: left;
margin-right: 6px;
margin-bottom: 10px;
font: bold 0.8em Arial, Helvetica, sans-serif;
color: #333333;
display: block;
border: 1px solid #333300;
width: 150px;
height : 180px;
background-color : White;
}

[reybango]

Thanks for the feedback but unfortunately it didn't work. It seems to be off to the left slightly.

If you drop that into your editor and run it, you'll see what I mean.

Rey...

[Setek]

That CSS looks fine - could there be something else that makes it off slightly?

How slightly? 3px? One space?

Could it be because the image within the

li

has a space to the right of it?

Is the space showing just in IE, or in both IE and standards-compliant (e.g. Firefox) browsers?

It's possible, due to the markup's structure, IE is putting a space to the right of the image, then centering it horizontally, thus giving the illusion it's off-center.

It's possible, given that the

li

is of a fixed-width, that it -is- centered, but it looks uncentered because padding and/or margin is possibly eating into your width on one browser, but standards-compliant browsers add width + padding.

[edit]
How about this line of code?

#suggestlist li {
text-align:center;
float: left;
--> [i][b]margin-right: 6px;[/b][/i] <--
margin-bottom: 10px;
font: bold 0.8em Arial, Helvetica, sans-serif;
color: #333333;
display: block;
border: 1px solid #333300;
width: 150px;
height : 180px;
background-color : White;
}

Is that pushing the image to the left, because it's only starting the actual

li

6px from the right?
[/edit]

[edited by: Setek at 5:36 am (utc) on Sep. 7, 2006]

[reybango]

Hi Setek,

Thank you for looking at this. I'm testing this in Firefox 1.5.0.6 so its not specific to IE.

I also thought that the margin-right was throwing it off but even after it changing it, its still off to the left.

If you take the code that I posted and create a simple htm file, you'll see the results. Its driving me batty!

Rey...