Плитки с центром по CSS (регулируемая ширина)

#html #css #center

#HTML #css #центр

Вопрос:

Я хотел бы создать страницу, содержащую произвольное количество плиток фиксированного размера, где количество плиток в каждой строке будет регулироваться в соответствии с шириной окна. Я создал эту функциональность здесь.

Однако я хочу, чтобы эти плитки были центрированы в сером поле. Я попытался создать промежуточный #tile-box элемент, который, как я думал, я мог бы центрировать и делать переменной шириной, чтобы соответствовать плиткам внутри него, но я не мог заставить это работать вообще.

Любые предложения о том, как расположить плитки по центру в сером div?

Ответ №1:

ну, я делаю это только в вашем коде

 #tile-box {
    border: 1px solid blue;
    display: table;
    text-align:center; //i only added this line to your css
}

вы можете сделать это для центрирования вашего текста, есть много способов, которыми вы можете представить свое тело в своем html, надеюсь, я вам помог…

Ответ №2:

вы прошли большую часть пути, но вам это действительно не нужно display:table ..

Демонстрация JSfiddle

CSS

 #body {
    width: 50em;
    max-width: calc(100% - 5em);
    margin: auto;
    padding: 2em;
    margin-bottom: 2em;
    background-color: #ccc;
    overflow: auto;
}

#tile-box {
    border: 1px solid blue;
    text-align: center;
}

.tile {
    width: 5em;
    height: 5em;
    background-color: #fff;
    margin: 1em;
    padding: 0;
    display: inline-block;
    clear: left;
    vertical-align: top;
    position: relative;
    overflow: hidden;
}

Ответ №3:

Центрирование по горизонтали : text-align: center;

Выравнивание по центру по вертикали : line-height: 12em;/* Height of the container less the font-size */

Результат онлайн здесь: http://jsfiddle.net/LHDJj/17 /