Center inline-blocks with dynamic width in CSS

Question

So.. I have a dynamic width page. Below, the wrapper div centers the divs inside of it. However, each div has a style of:

display:inline-block;
width:400px; /* static */

This makes the inside divs, side by side. But that means that there is some whitespace left over depending on the width of the browser and how many divs can go side by side without breaking to the next line.

To get an idea of what I am going for, open up your Google Chrome New Tab page and drag your browser window to make it smaller. You will see that when you go too far, some of the chrome apps bump to the next line BUT it still stays centered.

In my case, they bump to the next line and become not centered.

This is what my code looks like:

<div class="wrapper">
    <div class="iB"></div>
    <div class="iB"></div>
    <div class="iB"></div>
    <div class="iB"></div>
    <div class="iB"></div>
    <div class="iB"></div>
</div>

I want the inside divs to be side by side unless there is not enough room in which case the end one will bump to the next line down, ALL while staying centered in the parent div.

Thanks for any help.

raphinesse · Accepted Answer · 2012-02-12T15:32:24.403

6

If I understood you correctly adding text-align: center to your .wrapper styles should give the desired effect. See this fiddle for an example. Resize the result panel to watch the reordering of the boxes.

Like Akaishen already mentioned inline-blocks flow like text. That's why you can control their alignment with text-align. However if you want very fine control over your layout you might run into problems using inline-blocks. Since they flow like text whitespace between them is not ignored for instance. And unfortunately you can't really determine the absolute width of a space across browsers and OSs. The gaps between blocks in my example are caused by this.

edited Feb 12 '12 at 15:32

answered Feb 12 '12 at 02:14

raphinesse

19,068
6
39
48

That's exactly what I wanted! Now is this more of a hack rather than the right way to do it? – Jacob Feb 12 '12 at 02:25
@jake It's no hack, see above for an explanation – raphinesse Feb 12 '12 at 02:39
I know it's not a hack. I have used this in the past and I didn't even think of using it. I shouldn't have said "hack", what I mean is there has to be a better way to do this. But for now, i see this is the best way. – Jacob Feb 12 '12 at 15:20

score 2 · Answer 2 · answered Feb 12 '12 at 02:26

2

As you are using the display: inline-block the <div> tags are essentially inline elements and can be styled as such. text-align: center would center each element. At this point, you need a container / wrapper to define the maximum and minimum widths.

There could be a better way to achieve what you are looking for, and this is not exactly like how the Chrome windows work, though it's a start: fiddle

answered Feb 12 '12 at 02:26

Akaishen

418
3
12

Thanks! And yeah I figure there is a better way. Probably something to do with css3 box-flex in the future. – Jacob Feb 12 '12 at 02:29
To answer your question to raphinesse, this isn't a hack. However, IE7 doesn't implement inline-block on non-inline elements. The `
` tag is not a natural inline element. In IE7, you'll get a series of vertical boxes. You can read more about it [here](https://developer.mozilla.org/en/CSS/display). Good luck!
– Akaishen Feb 12 '12 at 02:38

Center inline-blocks with dynamic width in CSS

2 Answers2

Linked