Центрированные divs, которые плавают влево?

Я хочу, чтобы центрировать дивы, что-то вроде:Центрированные divs, которые плавают влево?

<div style='width:100%;'> 

    <div style='float:left; width=40px; height=40px;'></div> 
    <div style='float:left; width=40px; height=40px;'></div> 
    <div style='float:left; width=40px; height=40px;'></div> 
    ... 

</div>

В то время как я хочу, чтобы ребенок дивы быть плавали, чтобы они появились в том же ряду, я хотел бы, чтобы они были сосредоточены в строке по горизонтали. По мере добавления большего количества divs, возможно, потребуется, в конце концов, обернуть еще одну строку, что отлично. Но я бы хотел, чтобы эти предметы тоже были сосредоточены. Что-то вроде:

|     | 
| X X X X X X | 
|  X X  |

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

Какой правильный стиль применяется здесь?

Благодаря

источник

2010-08-04 user246114

'дисплей: рядный block' приходит на ум, но я не уверен, как центрирование будет работать в этом случае. – You

Для начала вы должны использовать двойные кавычки, а не одинарные кавычки, чтобы разграничить значения атрибутов HTML. И ваши встроенные стили используют '=', а не ':' ... –

Попробуйте установить верхний DIV (один с шириной: 100%;) иметь выравнивания текста: центр; затем дайте каждому div отображение: inline-block; и margin: auto;

Это будет работать в хроме, опера, FF, но не в проводнике.

IE поддерживает только встроенный блок для встроенных элементов, так, чтобы она работала в IE сделать внутренние дивы пролеты,

нравится эта

<div style="width:100%;text-align:center;"> 
    <span style="margin:auto;background-color:red;width:100px;height:50px;display:inline-block;margin-bottom:5px;">&nbsp;</span> 
    <span style="margin:auto;background-color:red;width:100px;height:50px;display:inline-block;margin-bottom:5px;">&nbsp;</span> 
    <span style="margin:auto;background-color:red;width:100px;height:50px;display:inline-block;margin-bottom:5px;">&nbsp;</span> 
    <span style="margin:auto;background-color:red;width:100px;height:50px;display:inline-block;margin-bottom:5px;">&nbsp;</span> 
    <span style="margin:auto;background-color:red;width:100px;height:50px;display:inline-block;margin-bottom:5px;">&nbsp;</span> 
    <span style="margin:auto;background-color:red;width:100px;height:50px;display:inline-block;margin-bottom:5px;">&nbsp;</span> 
    <span style="margin:auto;background-color:red;width:100px;height:50px;display:inline-block;margin-bottom:5px;">&nbsp;</span> 
    <span style="margin:auto;background-color:red;width:100px;height:50px;display:inline-block;margin-bottom:5px;">&nbsp;</span> 
</div>

источник

2010-08-04 20:15:19 Sruly

Центрированные divs, которые плавают влево?

ответ

Смежные вопросы