Flexbox горизонтальое выравниваие?

Question

[artmirarmi]

Как выровнять по центру по горизонтале тлько один элемент внутри flex контейнера?

https://jsfiddle.net/qz48nbwe/17/

Answer 1

[Dauren Syzdykov]

Добавил строки кода в эту ссылку

.slogan {
  color: #fff;
  font-size: 28px;
  display:block;
  width: 100%;
  text-align:center;
  position:absolute;
}

Answer 2

[profesor08]

Любыми средствами сделай три колонки, содержимое средней центрируй. Имея только две колонки, ты никак не расположишь одну из них по центру не выдирая ее тем-же position: absolute.

Comments

[artmirarmi]

Это типа костыли вставлять?

[profesor08]

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

Answer 3

[Ankhena]

Вот так: https://jsfiddle.net/7d0fwpmc/
Но если ширина логотипа будет неизвестна, то абсолютом.

Если вдруг по центру оставшегося пространства https://jsfiddle.net/u13tmyhj/

Answer 4

[Александр Зачиналов]

.header {
  align-items: flex-start;
}
.slogan {
  align-self: center;
}

Comments

[artmirarmi]

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

[Александр Зачиналов]

Не зная размерность сетки, не подскажу. Такие задачи удобнее решать не на flex

[artmirarmi]

Александр Зачиналов, а на чем такие задачи удобнее решать?

[Александр Зачиналов]

ну или просто выдрать логотип из потока на абсолют тогда: https://codepen.io/anon/pen/vVxqBm

Answer 5

[mikeyuriev]

Можно добавить псевдоэлемент в .header:

.header::after {
  content: "";
  display: block;
  width: 174px;
}

Answer 6

[Magnus Keef]

.slogan {
color: #fff;
font-size: 28px;
margin-right: 30%/*!!!!!!!!!!!!!!!!!!!!!!!!*/
}