How to center a list when display:block?

[SM]

Hello,
I've been playing with this one for hours and it's driving me crazy!

I have a list (<ul>) that contains images... sort of a thumbnail. I
want the images to display in center. How do i achieve this?
I've been reading the internet for a solution with no success.


Here's a sample of my code:
....
<ul class="nav_cd_imgs">
<li><a href="#"><img src="images/1.jpg" /></a></li>
<li><a href="#"><img src="images/2.jpg" /></a></li>
<li><a href="#"><img src="images/3.jpg" /></a></li>
</ul>
....

Heres' my CSS:

ul.nav_cd_imgs {
float:left; width:100%;
}

ul.nav_cd_imgs li {
float:left; margin-right:5px;
}

ul.nav_cd_imgs li a {
display: block;
}

The codes and CSS works perfectly! The images aligned like a thumbnail
but that's exactly the point. They are left aligned and i want them
aligned center.

Any ideas on how to display the images centered? I've tried 'margin:0
auto' with no success...

Thanks in advance
Marco

 

[dorayme]

Hello,
I've been playing with this one for hours and it's driving me crazy!

I have a list (<ul>) that contains images... sort of a thumbnail. I
want the images to display in center. How do i achieve this?
I've been reading the internet for a solution with no success.


Here's a sample of my code:
...
<ul class="nav_cd_imgs">
<li><a href="#"><img src="images/1.jpg" /></a></li>
<li><a href="#"><img src="images/2.jpg" /></a></li>
<li><a href="#"><img src="images/3.jpg" /></a></li>
</ul>
...

Heres' my CSS:

No...

Just find out how wide the largest image is and:

ul {width:150px; margin: auto;}

Make sure you have a doctype at the head of your HTML.

 

[Bergamot]

I have a list (<ul>) that contains images... sort of a thumbnail. I
want the images to display in center.

Here's a sample of my code:

In the future, post a URL instead. It's a lot easier for us to work with
than code snippets, plus snippets often do not provide all the necessary
info.

<ul class="nav_cd_imgs">
<li><a href="#"><img src="images/1.jpg" /></a></li>
<li><a href="#"><img src="images/2.jpg" /></a></li>
<li><a href="#"><img src="images/3.jpg" /></a></li>
</ul>

Simple, really. Don't float anything, or use display:block. That will
make those elements left-aligned. Just set text-align:center on the <ul>
and make the li's inline.

ul.nav_cd_imgs {
text-align: center;
list-style: none;
}
ul.nav_cd_imgs li {
display: inline;
}

Set margins and padding to taste on the ul, li and img as needed.