Get a free trial // 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:-

    .twoColFixRtHdr #banner
    .twoColFixRtHdr #banner img
    border:solid 1px black;
    margin:10px 5px 10px 5px;

    and here is my html:


    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:


    The css would like something like this:

    #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.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed