How to center a list when display:block?

Discussion in 'HTML' started by SM, Oct 7, 2008.

  1. SM

    SM Guest

    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
     
    SM, Oct 7, 2008
    #1
    1. Advertising

  2. SM

    dorayme Guest

    In article
    <>,
    SM <> 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:
    >


    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.

    --
    dorayme
     
    dorayme, Oct 7, 2008
    #2
    1. Advertising

  3. SM

    Bergamot Guest

    SM wrote:
    >
    > 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.

    --
    Berg
     
    Bergamot, Oct 7, 2008
    #3
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Showjumper
    Replies:
    1
    Views:
    708
    Showjumper
    Mar 19, 2005
  2. Noozer

    Block DIV within a block DIV?

    Noozer, Jan 6, 2005, in forum: HTML
    Replies:
    3
    Views:
    11,385
    Mitja
    Jan 6, 2005
  3. Andy
    Replies:
    0
    Views:
    542
  4. morrell
    Replies:
    1
    Views:
    969
    roy axenov
    Oct 10, 2006
  5. Alvin
    Replies:
    8
    Views:
    991
Loading...

Share This Page