Центрирование элементов на div

Question

Центрирование элементов на div

0

Это моя настройка

- 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 пикселей). Не совсем уверен, что я хорошо объясняю свою ситуацию, и я не уверен, что это возможно.

drooh 19 фев. 2014, в 00:58

Источник

0

Пожалуйста, поделитесь своими существующими HTML и CSS, и сделайте jsFiddle своей проблемы.
DACrosby 18 фев. 2014, в 23:23
0

Вы пытались вложить вложенные диваны div в родительский div с шириной, равной 100%, и установить свойство CSS text-align: center на родительском уровне?
Greg Jennings 18 фев. 2014, в 23:25
0

Я пытался использовать центр выравнивания текста, но хитрость заключалась в том, чтобы использовать display: inline-block. Должен признаться, я даже попробовал столик, аааа! Спасибо за помощь, я узнал что-то новое!
drooh 19 фев. 2014, в 16:29

Показать ещё 1 комментарий

Теги:

html

css

2 ответа

1

Поэтому я предполагаю, что ваши плитки имеют неправильный размер. Вы можете использовать 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;
}

Bart 18 фев. 2014, в 22:11

Ещё вопросы

Пожалуйста, поделитесь своими существующими HTML и CSS, и сделайте jsFiddle своей проблемы.
Вы пытались вложить вложенные диваны div в родительский div с шириной, равной 100%, и установить свойство CSS text-align: center на родительском уровне?
Я пытался использовать центр выравнивания текста, но хитрость заключалась в том, чтобы использовать display: inline-block. Должен признаться, я даже попробовал столик, аааа! Спасибо за помощь, я узнал что-то новое!

Nit · Accepted Answer · 2014-02-18T21-24-00.000Z

Там нет необходимости плавать ваши элементы, чтобы получить их бок о бок. Просто используйте 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;
}