9

I want to horizontally center a few inline blocks, but at the same time have them align to the left on their last row (see below).

The problem is that I achieved something like this (http://jsfiddle.net/5JSAG/):

|        _____   _____        |
|       |     | |     |       |
|       |  1  | |  2  |       |
|       |_____| |_____|       |
|            _____            |
|           |     |           |
|           |  3  |           |
|           |_____|           |

While I want something like this:

|        _____   _____        |
|       |     | |     |       |
|       |  1  | |  2  |       |
|       |_____| |_____|       |
|        _____                |
|       |     |               |
|       |  3  |               |
|       |_____|               |

You can see some sample HTML at http://jsfiddle.net/5JSAG/.

I have tried using column-count and column-width but it doesn't work as I want it to, because the order of the blocks changes:

|        _____   _____        |
|       |     | |     |       |
|       |  1  | |  3  |       |
|       |_____| |_____|       |
|        _____                |
|       |     |               |
|       |  2  |               |
|       |_____|               |
bogdansrc
  • 1,338
  • 2
  • 15
  • 28

2 Answers2

3

Found a quite simple solution to this problem: just add some filler divs at the end, which are of the same width with the blocks that are aligned.

http://jsfiddle.net/5JSAG/34/

HTML:

<div style="text-align:center">
    <div class="entry">1</div>
    <div class="entry">2</div>
    <div class="entry">3</div>
    <div class="entry">4</div>
    <div class="entry">5</div>
    <span class="fill"></span>
    <span class="fill"></span>
    <span class="fill"></span>
    <span class="fill"></span>
</div

CSS:

.fill
{
    display:inline-block;
    width:100px;
    height:0px;
    line-height:0px;
    font-size:0px;
}

.entry 
{ 
    display:inline-block;
    margin-top:10px;
    width:100px;
    height:60px;
    padding-top:40px;
    border:1px solid red;
}
bogdansrc
  • 1,338
  • 2
  • 15
  • 28
  • Interesting thoughts. But in my case, it is a little different. I create the `
    1
    ` dynamically based on an array. The elements of array are dynamically changed, and the length of array is unknown. Do you know how to solve it?     – Ng2-Fun Dec 23 '16 at 17:41
1

Floating them seems the best option here. You could put left/right margins on the container if you need space on the left and right, or you could give the container a width and auto left and right margins.

Looks like it might be worth margin this up as an unordered list, too.

Here's an example:

http://codepen.io/anon/pen/Ehgdp

ralph.m
  • 13,468
  • 3
  • 23
  • 30
  • Floating seems to take them out of the container and they are not centered anymore. Setting a margin on the container has no effect. – bogdansrc May 04 '13 at 14:18
  • I've updated my example. I added `overflow: hidden;` to force the container to wrap around the floated contents, and I have left/right margins to center the container. – ralph.m May 04 '13 at 14:23
  • This is close, but I need the width of the container to be flexible. Any way to achieve that? Without having the width flexible I could just use a table instead. – bogdansrc May 04 '13 at 14:31
  • Certainly, the container's width can be flexible. It's just hard to get it dead center, that's all. I originally had the container's width at 60%, but changed it to a max-width. But you could change it back to something like this: `.container { list-style: none; margin: 0 auto; width: 60%; overflow: hidden; }`. – ralph.m May 04 '13 at 14:33
  • The problem is that I need them to be perfectly centered. With the suggested changes, the edge on the right is larger by 50-100px. – bogdansrc May 04 '13 at 14:44
  • I've put together a jQuery plugin to solve this problem with floats: https://github.com/davekiss/fitfloats – Dave Kiss Jul 12 '13 at 13:58