Grow your CSS skills. Land your dream job.

Center images side by side in Div

  • # February 21, 2010 at 9:16 am

    I know this is probably something very simple, but I need to align some images side by side across the page and then centre them within a div.

    Here is my CSS for the div and images:-

    Code:
    .twoColFixRtHdr #banner
    {
    height:120px;
    text-align:center;
    }
    .twoColFixRtHdr #banner img
    {
    border:solid 1px black;
    margin:10px 5px 10px 5px;
    float:left;
    }

    and here is my html:

    Code:

    But the images are still aligning to the left in the div,

    help please……

    # February 21, 2010 at 1:26 pm

    To center the div you need to give it a width and margin: 0 auto;

    Then for the 8 images contained within the above mentioned div, give each a width, float: left, add margin or padding and do the math, width of the image + margin or padding + border, so they fit within the width of the containing div.

    # February 21, 2010 at 1:30 pm

    A possible solution would be to place the images div within another div then do the margin: 0 auto; Not sure exactly understand the outcome you want a link to a test page would be helpful but this is what it might look like:

    Code:

    The css would like something like this:

    Code:
    #container #banner {
    margin: 0 auto;
    }

    #container #banner img {
    float: left;
    /* Then add individual styles for the images */

    That would probably get the outcome your looking for.

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".