CODEWITHSUNDEEP
htmlcss
Paul
Paul

Reputation: 11746

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

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?

Upvotes: 1

Views: 154

Answers (6)

Maroshii
Maroshii

Reputation: 4017

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

Upvotes: 0

WooCaSh
WooCaSh

Reputation: 5212

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/

Upvotes: 1

Marc Audet
Marc Audet

Reputation: 46785

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.

Upvotes: 2

Alex K
Alex K

Reputation: 15828

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.

Upvotes: 0

Cam
Cam

Reputation: 1902

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

Upvotes: 1

zitta
zitta

Reputation: 77

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

align: center

Upvotes: -2

Related Questions