Выровнять по центру переменную ширины на экране 100% - PullRequest
Новая
       2

Выровнять по центру переменную ширины на экране 100%

10 голосов
/ 04 ноября 2011

Я получил этот HTML 

<div id="wrapper">
<div id="center">

<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="clearBoth"></div>

</div>
</div>

И CSS 

#wrapper{width:100%}
.cell{float:left}

Таким образом, обертка имеет ширину 100%, а ширина и количество ячеек являются переменными, то есть ширина #center также является переменной.

Вопрос: Как сохранить #center горизонтально по центру?

Ответы [ 2 ]

25 голосов
/ 04 ноября 2011

Да, вы можете сделать это с display:inline-block.

Например:

CSS: 

 #wrapper{
    width:100%;
    text-align:center;
}
#center{
    display:inline-block;
    *display:inline;/* IE*/
    *zoom:1;/* IE*/
    background:yellow;
    overflow:hidden;
    text-align:left;
}
.cell{
    float:left;
    width:50px;
    height:50px;
    background:red;
    margin:5px;
}

Проверьте этот пример http://jsfiddle.net/8a4NK/

1 голос
/ 27 марта 2017

Пересмотреть это в 2017 

#wrapper{
    width:100%;
    display: flex;
    justify-content: space-around;
}
#center{
    background:yellow;
    display: flex;

}
.cell{
    width:50px;
    height:50px;
    background:red;
    margin:5px;
}

Fidle: http://jsfiddle.net/027m8mnv/

...