How do I center a div block of left aligned images?

Question

I'm trying to center a div block of left-aligned images. Here is the screen shot:

enter image description here

The desired result is this:

enter image description here

My HTML is this:

<div style="margin-left:auto; margin-right:auto;padding:10px 0 0 0;">
    <img class="medium_thumb_rounded" id="15" src="medium_thumb.jpg">
    <img class="medium_thumb_rounded" id="15" src="medium_thumb.jpg">
    <img class="medium_thumb_rounded" id="15" src="medium_thumb.jpg">
    <img class="medium_thumb_rounded" id="15" src="medium_thumb.jpg">
    <img class="medium_thumb_rounded" id="15" src="medium_thumb.jpg">
    <img class="medium_thumb_rounded" id="15" src="medium_thumb.jpg">
    <img class="medium_thumb_rounded" id="15" src="medium_thumb.jpg">
</div>

Current CSS:

.medium_thumb_rounded {

  display:inline-block;
  border: 1px solid #B6BCBF;
  height: 80px;
  margin-right: 1px;
  margin-bottom: 5px;
  width: 80px;

  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
       border-radius: 3px;  
}

What am I missing?

possible duplicate http://stackoverflow.com/questions/114543/how-to-center-a-div-in-a-div-horizontally?rq=1 — Ravi, May 10 '13 at 19:27
@Paul simply margin:0 auto should work ,if not than u need to position a div element position:absolute; — Maizere Pathak.Nepal, May 10 '13 at 19:28
@Maizere Take a look at Georges jsfiddle and you'll see why this doesn't work — Paul, May 10 '13 at 19:32
@Paul what is ur problem ,this is how it centers.U want 4 images be in center like square than use photoshop instead — Maizere Pathak.Nepal, May 10 '13 at 19:34
@Marc Audet yes, because I think I may have made it too confusing so I posted an image of the desired result. — Paul, May 10 '13 at 19:36
Would you consider a solution that involves JavaScript or jQuery? — Marc Audet, May 10 '13 at 19:38
@Paul use photoshop to merge imgs to single img and than center it — Maizere Pathak.Nepal, May 10 '13 at 19:42
@Maizere The website is responsive so the div could be any width — Paul, May 10 '13 at 19:43
Is that person under age? Feels like a violation of some internet use laws. — Kermit, May 10 '13 at 19:44
possible duplicate of [Trying to align a centered div block of images to the left](http://stackoverflow.com/questions/16487844/trying-to-align-a-centered-div-block-of-images-to-the-left) — cimmanon, May 10 '13 at 20:03

Marc Audet · Accepted Answer · 2013-05-10T21:08:37.567

Solution using jQuery

Here is a prototype of how I would solve this problem.

The HTML:

<div class="widget-wrap">
    <div class="widget-content">
        <img class="medium_thumb_rounded" src="http://placekitten.com/100/100">
        ...
    </div>
</div>

and the CSS:

.widget-wrap {
    outline: 2px dashed blue;
    text-align: center;
    margin: 0 50px;
}
.widget-content {
    outline: 2px dotted blue;
    display: inline-block;
    vertical-align: bottom;
}
.medium_thumb_rounded {
    display: block;
    float: left;
    width: 100px;
}

and the JavaScipt/jQuery:

var $max_w = 600;
var $img_w = 100;

$(window).resize(function () {
contentResizer();
});

// On load, initially, make sure to set the size.
contentResizer();

function contentResizer() {
    var $parent_w = $(".widget-wrap").width();
    if ($parent_w < $max_w) {
        var $set_w = $parent_w;
    } else {
        var $set_w = $max_w;
    }
    var $trimmed_w = Math.floor($set_w / $img_w) * $img_w;
    $(".widget-content").width($trimmed_w);
}

Fiddle Demo: http://jsfiddle.net/audetwebdesign/jJCak/

How This Works

I define a containaing block div.widget-wrap that will text-align: center its content. The .widget-content is an inline-block type and will hold the images. Use vertical-align to get rid of some extra white space due to source code line breaks and so on.

Within the .widget-content, I floated the images to the left and set the width to 100px. You can play with margins and padding as needed.

The jQuery Action

There are two parameters, the image width of 100px and the maximum width of images 600px corresponding to 6 images, again you can determine what is best.

Upon resizing the window, the function contentResizer() checks the width of the .widget-wrap and compares it to the $max_w. If the window shrinks enough, calculate a new width for .widget-content by rounding down the with to the next whole number of images.

You also want to make sure that you allow for the case of the window getting larger (alternate clause in if statement).

Finally, call the contentResizer() once upon loading the page.

Why This Can't Be Done With CSS Alone

The CSS parser will not determine the width of a containing block based on the content of the descendant elements (except for tables, which is uses a different sizing algorithm).

In this application, if you set the width to a fixed value and use margin: 0 auto, the block will center. If you don't set the width and use margin: 0 Xpx, you again will have a centered block with left/right margin of Xpx.

However, if you rely on width: auto and margin: 0 auto, the CSS spec does not specify what to do, so the width fills up the width of its parent container.

The reason for this is that the CSS parser formats the content from left to right, top to bottom in a single a pass (except for tables). Ideally, the CSS parser would set the container width, lay out the images, and then go back and calculate the width, and then shrink-to-fit the container width, BUT this is not how things work.

There is a shrink-to-fit algorithm used in table-cells and in some cases for absolutely positioned elements that are overflowing, but this did not help in your application.

Your very welcome! This is a common problem and worth tackling. By the way, if the user had disabled JavaScript, the site will still look okay, just slightly off center, and that is okay. — Marc Audet, May 10 '13 at 21:53

score 1 · Answer 2 · answered May 10 '13 at 19:43

1

If you give your div a width, then set your margin: 0 auto; you should be set to go.

answered May 10 '13 at 19:43

Cam

1,884
11
24

The site is responsive so I can't give it a set width...the parent width can change – Paul May 10 '13 at 19:47
You might be able to though, if you put display:block on your div, and then put text-align: center; on body but still retaining your text-align:left on your div it may have the desired effect. – Cam May 10 '13 at 19:50
Try adding a border to the parent div and you'll see that the block of images is no longer centered...maybe this isn't possible with just CSS – Paul May 10 '13 at 20:04

WooCaSh · Answer 3 · 2013-05-10T21:19:29.873

1

It's easy

You need add one more div, let's call it parent and second add class children to your existing div

div.children {
    width: 80%; //change it for what you want
    text-align: left;
}
div.parent {
    text-align: center;
}

http://jsfiddle.net/tuxH7/5/

edited May 10 '13 at 21:19

answered May 10 '13 at 21:14

WooCaSh

5,180
5
36
54

If you add some outline to your containers, you will see that there is extra white space to the right of the images... see http://jsfiddle.net/audetwebdesign/tuxH7/6/ – Marc Audet May 10 '13 at 21:31

score 0 · Answer 4 · answered May 10 '13 at 20:37

0

I would suggest using JavaScript to add the widths of all the items in the first row. Then set the wrapper around the images to be that width. That way, if the wrapper has margin:auto; on it, it will be centered.

answered May 10 '13 at 20:37

Alex K

14,893
4
31
32

Maroshii · Answer 5 · 2013-08-02T14:01:09.597

Seeing too many complicated answers here. This should work, or at least answer the OP's question:

    <div id="wrapper">
        <div class="content">
            <img src="medium_thumb.jpg" />
            <img src="medium_thumb.jpg" />
            <img src="medium_thumb.jpg" />
            <img src="medium_thumb.jpg" />
            <img src="medium_thumb.jpg" />
            <img src="medium_thumb.jpg" />
            <img src="medium_thumb.jpg" />
            <img src="medium_thumb.jpg" />
        </div>
    </div>

CSS:

    .content{
        margin: 0 auto;
        width: 80%;
    }

    .content img{
        float:left;
        display:block;
        width:25%; /* This controls how many you want per row*/
    }

Fiddle here

It's good answer but OP probably don't want scale images with page resolution. — WooCaSh, May 10 '13 at 22:19

score -2 · Answer 6 · answered May 10 '13 at 19:27

-2

just put the following attribute in your css class or in the style section

align: center

answered May 10 '13 at 19:27

zitta

77
2

The `align` property doesn't exist. – Maroshii May 10 '13 at 21:45

How do I center a div block of left aligned images?

6 Answers6