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

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

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

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

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

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

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

Я также пробовал с float: left вместо display: inline-block.

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


css center resize
person Anthony    schedule 17.03.2011    source источник
comment
Поделитесь кодом здесь, например [jsfiddle.net/yTW22/2/]. Это намного проще. чтобы понять, чем и могли бы получить некоторую помощь быстрее. Извините за мой английский.   -  person ted    schedule 17.03.2011

Ответы (2)


arrow_upward
14
arrow_downward

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

E.g.

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/

person Paul D. Waite    schedule 17.03.2011
comment
Эй, большое спасибо за совет, это сработало отлично! Сложно использовать такое выравнивание текста ... работает как в i.e., так и в chrome. Еще раз спасибо! - person Anthony; 18.03.2011
comment
@Энтони: ура! Рад, что мы нашли решение, особенно для такого хорошо сформулированного вопроса, как ваш (потому что тогда другим людям с такой же проблемой будет легче найти его). Если вы хотите принять мой ответ (нажав галочку рядом с ним), другим людям будет легче его найти, а я получу 15 приятных очков репутации. - person Paul D. Waite; 18.03.2011

arrow_upward
1
arrow_downward

К сожалению, я не думаю, что этого можно добиться только с помощью 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');
});
person BenM    schedule 17.03.2011
comment
у нас есть решение только для CSS the-same-t/5343821#5343821">здесь, хотя я предполагаю, что с использованием display: inline-block могут быть проблемы в более ранних версиях IE. - person Paul D. Waite; 17.03.2011
comment
Да, к сожалению, использование text-align: center в родительском контейнере не будет работать в более ранних версиях IE. :-( - person BenM; 17.03.2011