Hi Semon,
Do you just want to align the images to the centre of a container or
for a full page ? A sshot would have helped a lot. Im giving a
solution for aligning your <ul> itself to the centre of a parent
container.
HTML snipppet
---------------------------------------------
<div class="outerWrapper>
<ul>
<li><img src="...." alt="..."/></li>
<li><img src="...." alt="..."/></li>
<li><img src="...." alt="..."/></li>
</ul>
</div>
CSS snipppet
---------------------------------------------
.outerWrapper{
width:500px;/*this is the width of the outercontainer that you
would be using, the width of which, you can define yourself*/
}
.outerWrapper ul{
width:200px;/*this width is user-defined*/
float:left;
margin:auto;/*this is important as this takes an automatic value
based on the parent container, here parent container is outerWrapper,
and hence aligns it to the centre*/
}
.outerWrapper ul li{/*this is the list in which u insert the image
thumbnails*/
width:100px;/*this width is user-defined*/
padding:10px;/*user-defined*/
}
On Oct 13, 6:11 pm, "Paulo Diovani" <[EMAIL PROTECTED]> wrote:
> I don't think it's possible to center floating elements, unless you
> trick it someway...
> but try to set margin:auto; on the <ul> (not <li>s).
>
>
>
> On Sun, Oct 12, 2008 at 11:17 AM, smartcookie <[EMAIL PROTECTED]> wrote:
>
> > Hi there,
> > did you try this?
>
> > ul.nav_cd_imgs li {
> > float:left; margin-right:5px; text-align:center;
>
> > }
>
> > On Oct 6, 11:29 pm, semon <[EMAIL PROTECTED]> wrote:
> >> 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
>
> --
> Paulo Diovani
> [EMAIL PROTECTED]
> +55 51 8146 5413
> ___________________http://www.diovani.com
--~--~---------~--~----~------------~-------~--~----~
--
You received this because you are subscribed to the "Design the Web with CSS"
at Google groups.
To post: [email protected]
To unsubscribe: [EMAIL PROTECTED]
-~----------~----~----~----~------~----~------~--~---
