Автоматическая маржа с автоматической шириной

Я пытаюсь центрировать контейнер с рядами квадратных div внутри него. Однако, просто пытаясь заставить его работать, я уменьшил его до одного квадрата внутри контейнера. Он должен иметь автоматическую ширину, но также должен быть центрирован. Как я могу центрировать контейнер div, который использует автоматическую ширину? Кажется, что div "panel" центрируется только тогда, когда его ширина фиксирована.

HTML FILE  

<div class="panel">
    <div class="item"></div>
</div>

CSS FILE

.panel {
    position:absolute; /*This seems necessary to get the auto width to work.*/
    margin: 10px auto;

    border-style: solid;
    border-color: #000000;
}

.item {
    width: 50px;
    height: 50px;
    margin: 30px;

    border-style: solid;
    border-color: #000000;
}

Со временем я собираюсь добавить больше элементов внутри панели.


html layout width margin
person user1592026    schedule 11.08.2012    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Я не уверен, в чем именно заключается ваш вопрос, но вам не нужно использовать ни абсолютную/фиксированную позицию, ни левое/правое плавание для центрирования внутреннего div. Чтобы центрировать внутренний div, вы можете использовать margin-left: 50% минус margin: 30px, и ваш внутренний div будет центрирован. JSFIDDLE

person amiregelz    schedule 11.08.2012
comment
Да, но как только я добавлю больше элементов, он больше не будет центрироваться. Я стараюсь избегать абсолютных измерений везде, где это возможно. - person user1592026; 12.08.2012