Можно ли расположить div рядом друг с другом и отцентрировать их?

Question

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

Пример. Предполагается, что в одной строке может быть 4 элемента div.это выглядит так:

1 деление: ...[]...

2 деления: ..[][]..

3 деления: .[][][].

4 деления:[][][][]

5 делений:
[][][][]<br> ...[]...

Возможно ли это?

Я знаю, что вы можете поместить несколько делений в одну строку (и позволить им переноситься)с float:left и внешним контейнером с width: 100%

Проверьте здесь: http://jsfiddle.net/Tyilo/cD7e3/1/

Answer 1

Конечно, это возможно:

http://jsfiddle.net/pRNgH/

Я включил хаки, необходимые для работы display: inline-block в IE6 / 7, для дополнительной информации:

Встроенный блок не работает в Internet Explorer 7, 6

Необходимо убедиться, что вы не выводите пробелы между .dynamic s или , это происходит .

CSS:

.divHolder {
    width: 400px;
    border: 2px solid red;
    margin: 0 0 16px 0;
    text-align: center
}
.dynamic {
    text-align: left;
    width: 100px;
    height: 50px;
    background: #ccc;

    display: inline-block;
    /* make it work in ie7 */
    *display: inline;
    zoom: 1
}

HTML:

<div class="divHolder">
    <div class="dynamic">2</div><div class="dynamic">2</div>
</div>

Answer 2

Вам нужно поместить все div в оболочку div и использовать text-align: center;для обёртки div.

EDIT:

Проверьте комментарий Марти, он прав.Вам также нужно было бы сделать display: inline-block;для внутренних дел.

Answer 3

Пересмотрено на основе вашего комментария:

Если вы создаете их динамически, то почему вы не можете сделать:

parent width = totaldivs * div width;
parent margin: 0 auto;