Лучший способ вертикально отцентрировать горизонтально центрированный ряд делений

Question

Лучший способ вертикально отцентрировать горизонтально центрированный ряд делений

0

Какой лучший способ сосредоточить несколько дивизий?

Я могу представить себе несколько способов, но я ищу простейший, самый элегантный.

Вот ссылка на страницу, которая делает это:

http://soulmastery.com/#/News

Я ищу что-то, что IE9+ безопасно.

Обновление 1

Чтобы уточнить, мне нужно также вертикально центрировать ряд div.

Не дубликат, ориентированные вопросы сосредоточены только по горизонтали.

Обновление 2

Эта скрипка (http://jsfiddle.net/k6ShD/4/) почти делает это с минимальным CSS, но мне нужно, чтобы эти квадратики были расположены по горизонтали.

align-items: center;

Обновление 3

Поскольку вопрос закрыт, я отвечу здесь.

Я знал, что с CSS3 должен быть хороший чистый способ:

http://jsfiddle.net/k6ShD/6/

В основном,

display:flex; 
align-items: center;
justify-content: center;

Являются ли ключи для этого с помощью модели гибкой коробки.

mtyson 14 март 2014, в 22:55

Источник

1

Теперь, когда у вас есть вертикальное центрирование, просто используйте горизонтальное центрирование от другого вопроса. stackoverflow.com/questions/114543/...
JasonMArcher 14 март 2014, в 22:53
0

@JasonMArcher - я добавил свой ответ в строке.
mtyson 14 март 2014, в 22:54
1

Я, например, проголосовал за открытие, так как вопрос больше не является дубликатом.
JasonMArcher 14 март 2014, в 22:57

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

Теги:

javascript

html

css

layout

2 ответа

Ещё вопросы

Теперь, когда у вас есть вертикальное центрирование, просто используйте горизонтальное центрирование от другого вопроса. stackoverflow.com/questions/114543/...
@JasonMArcher - я добавил свой ответ в строке.
Я, например, проголосовал за открытие, так как вопрос больше не является дубликатом.

JohanVdR · Answer 1 · 2014-03-14T20-21-00.000Z

Существует не лучший способ, но многие способы сделать это... Это сбрасывает границу первого столбца.

    <section id="soul-masters" class="row">
        <div class="col">[col1]</div>
        <div class="col">[col2]</div>
        <div class="col">[col3]</div>
    </section>

    *:before, *:after {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }
    #soul-masters {
        margin: 0 auto;
        max-width: 990px;
    }
    .row:before, .row:after {
        content: " ";
        display: table;
    }
    .row:after {
        clear: both;
    }
    .col {
        float: left;
        width: 31.3333%;
        background: gray;
        margin-left: 2%;
    }
    .col:first-child {
        margin-left: 0;
    }

http://fiddle.jshell.net/3eNds/20/ (добавлено normalize.css для установки некоторых значений по умолчанию, удаление ненужного поля сброса в контейнере строк)

http://fiddle.jshell.net/3eNds/20/show/

sstadt · Answer 2 · 2014-03-14T19-56-00.000Z

Лучший способ центрировать произвольный набор таких div - установить режим отображения на встроенный блок и установить родительский текст в центр текста:

<div class="wrapper">
    <div id="box-1" class="center-me">...</div>
    <div id="box-2" class="center-me">...</div>
    <div id="box-3" class="center-me">...</div>
</div>

.wrapper {
    text-align: center;
}
.center-me {
    display: inline-block;
}