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

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

14 голосов
/ 17 марта 2011

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

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

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

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

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

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

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

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

Ответы [ 2 ]

13 голосов
/ 17 марта 2011

Вы пытались сохранить его в виде встроенного блока и поместить его в элемент уровня блока, для которого установлено значение 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/

1 голос
/ 17 марта 2011

К сожалению, это не может быть достигнуто с помощью 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');
});
...