центрирующие элементы на DIV

Question

Это моя установка

- 18 square tiles in a div 
- The side of the square is about 150px 
- There are images inside each square 
- Same padding and margin between squares 

То, что я хочу, это, всегда имеют один и тот же объем пространства на левой и правой части экрана, доведенного до размера экрана.

Прямо сейчас плитки внутри div перемещаются влево, и поэтому прокладка с правой стороны от div изменяется, а левый остается тем же (у меня он установлен примерно на 50 пикселей). Не совсем уверен, что я хорошо объясняю свою ситуацию, и я не уверен, что это возможно.

Answer 1

Вам не нужно плавать со своими элементами, чтобы получить их бок о бок. Просто используйте display: inline-block.

Пример:Jsfiddle

HTML:

<div id="container"> 
    <div class="tile"></div> 
    <div class="tile"></div> 
    <div class="tile"></div> 
    <div class="tile"></div> 
    <div class="tile"></div> 
</div> 

CSS:

#container { 
    text-align: center; 
    width: 100%; 
    background: orangered; 
} 

.tile { 
    width: 25px; 
    height: 25px; 
    margin: 5px; 
    background: yellow; 
    display: inline-block; 
} 

Answer 2

Так я предполагаю, что ваши плитки неправильного размера. Вы можете использовать display: inline-block вместо float:left.

http://jsfiddle.net/5gp75/

<div class="container"> 
    <ul class="horizontal tiles"> 
     <li style="width:100px">Tile 1</li> 
     <li style="width:200px">Tile 2</li> 
     <li style="width:150px">Tile 3</li> 
     <li style="width:70px">Tile 4</li> 
     <li style="width:100px">Tile 5</li> 
    </ul> 
</div> 

CSS

.container { 
    text-align: center; 
} 

.horizontal { 
    list-style-type: none; 
    padding: 0; 
} 

.horizontal>li { 
    display: inline-block; 
} 

.tiles>li { 
    padding: 1em; 
}