CODEWITHSUNDEEP
csscss-float
Nitzan Shaked
Nitzan Shaked

Reputation: 13598

CSS: center an inline-block div inside it's parent div

(Code: http://jsfiddle.net/T4hrK/)

I've looked and looked, and can't find how. I have an outer div, in which I want to center an inner div. The inner div contains a bunch of inline elements (like images in a gallery, say), which I am willing to make , or inline-block elements, or floating block elements, whatever it takes.

However, when there are "too many" inline elements inside the inner div, it will wrap them on a new line, and here's the catch: it will not size itself to exactly contain the result, but rather size itself to fit its parent width. When that's the case, I can't center it inside its parent, since it has its parent width.

What I want is for the inner inline elements to be left-aligned inside their containing div, but for that div to exactly enclose them, so that I can center it inside its parent.

Example:

<div style="border:1px solid red; padding:2px;">
  <div style="display:inline-block; border:1px solid green;">
    <span>1234567</span>
    <span>1234567</span>
    <span>1234567</span>
    <span>1234567</span>
  </div>
</div>

The inner (green) div is "too wide": it could have been narrow, but as it is I cannot center inside the red div.

In this example, of course, the span's are my images, the green div is what should exactly wrap/contain/enclose them, and the red div is what I want to center the green div in.

Upvotes: 1

Views: 3667

Answers (2)

AddiktedDesign
AddiktedDesign

Reputation: 512

How about adding text-align: center; to the parent div, as per this fiddle: http://jsfiddle.net/T4hrK/12/

Upvotes: 1

Andrew
Andrew

Reputation: 375

Are you looking for something like this? http://jsfiddle.net/Gxcwk/ That collapses based on size of inner elements within that inner div. I just made the inner elements

float:left; margin:2px 5px;

so you can see the division between them. I'd think that you'd be placing images that are equally sized inside anyway, if you want a neat looking grid.

Bear in mind that's only going to happen on page load or page refresh. Cool library if you're looking for something more fluid or responsive: jQuery masonry: http://masonry.desandro.com/

Upvotes: 1

Related Questions