Получение элемента CSS для автоматического изменения размера содержимого и в то же время центрирования

У меня есть элемент CSS с рамкой вокруг него, в котором может быть одно или несколько ящиков, поэтому ширина всего div изменяется в зависимости от того, сколько ящиков присутствует внутри него. Тем не менее, я хочу, чтобы весь этот div был центрирован на экране.

Обычно, чтобы сосредоточить вещи, я просто использую:

margin-left: auto;
margin-right: auto;

Но на этот раз мне приходится либо плавать элемент, либо делать его встроенным блоком, поэтому размер div будет изменен для контента, и если я это сделаю, маржа слева и margin-right автоматически не работает, он всегда остается в левой части экрана.

В настоящее время у меня есть:

#boxContainer {
    display:inline-block;
    clear:both;
    border:thick dotted #060;
    margin: 0px auto 10px auto;
}

Я также попытался использовать float: left вместо display: inline-block.

Знает ли кто-нибудь хороший способ обойти центр div и позволить ему одновременно изменять размер контента? Любая помощь будет принята с благодарностью.

Ответ 1

Вы пытались сохранить его встроенным блоком и помещать его в элемент уровня блока, который установлен на text-align: center?

например.

HTML

<div id="boxContainerContainer">
    <div id="boxContainer">
        <div id="box1"></div>
        <div id="box2"></div>
        <div id="box3"></div>
    </div>
</div>

CSS

#boxContainerContainer {
    background: #fdd;
    text-align: center;
}

#boxContainer {
    display:inline-block;
    border:thick dotted #060;
    margin: 0px auto 10px auto;
    text-align: left;
}

#box1,
#box2,
#box3 {
    width: 50px;
    height: 50px;
    background: #999;
    display: inline-block;
}

Кажется, что вы работаете: http://jsfiddle.net/pauldwaite/pYaKB/

Ответ 2

К сожалению, этого не может быть достигнуто с помощью CSS исключительно, я не думаю. Вы всегда можете использовать JavaScript, чтобы центрировать div, как только вы знаете его ширину (т.е. После добавления ящиков), например:

$(document).ready(function() {
    var itemWidth = $('#boxContainer').width();
    var availWidth = $(screen).width();
    var difference = availWidth - itemWidth;
    $('#boxContainer').css('margin: 0 ' + Math.round(difference / 2) + 'px');
});