Центрируйте несколько встроенных блоков с помощью CSS и выровняйте последнюю строку влево

Я хочу горизонтально центрировать несколько встроенных блоков, но в то же время их выровнять влево в последней строке (см. ниже).

Проблема в том, что я достиг чего-то подобного (http://jsfiddle.net/5JSAG/):

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

Пока я хочу что-то вроде этого:

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

Вы можете увидеть образец HTML в http://jsfiddle.net/5JSAG/.

Я попытался использовать column-count и column-width, но он не работает так, как я хочу, потому что изменяется порядок блоков:

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

Ответ 1

Нашел довольно простое решение этой проблемы: просто добавьте в конец некоторые разделители-заполнители, которые имеют одинаковую ширину с выровненными блоками.

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;
}

Ответ 2

Плавающие их, кажется, лучший вариант здесь. Вы можете поместить левое/правое поле на контейнер, если вам нужно место слева и справа, или вы можете дать контейнеру ширину и авто слева и справа поля.

Похоже, что это может стоить того же размера, что и неупорядоченный список.

Вот пример:

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