Flexbox: Держите текст с разрывом строки горизонтально по центру

avatar
Tim
8 апреля 2018 в 05:23
1411
1
2

У меня есть гибкий контейнер с некоторым текстом (например, h1), который имеет разрыв строки из-за ширины контейнера. Я пытаюсь сохранить текст встроенным, чтобы он автоматически не занимал 100% ширины контейнера, чтобы он оставался по центру по горизонтали, но наличие Flex в контейнере нарушает это. Я пробовал использовать align-self: center на h1 и ряд других вещей, но безуспешно. Любая помощь приветствуется.

Редактировать: я хочу, чтобы сам текст был выровнен по левому краю, но элемент h1 располагался в центре контейнера.

.container {
  width: 250px;
  background-color: tomato;
  
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

h1 { 
  display: inline; /* should only take as much space as it needs */
  align-self: center; 
}
<div class="container">
   <h1>Text text sdfsdlfkjs</h1>
</div>
Источник
Mers
8 апреля 2018 в 05:55
2

Ваш элемент h1 уже занимает всю ширину своего родителя. Вот почему часть встроенного текста (sdfsdlfkjs) возвращается на новую строку, потому что она не может полностью вписаться в ширину своего родителя. Вот почему вы не можете центрировать элемент h1 внутри его родителя, потому что он уже занимает всю ширину своего родителя. Вы можете просто подтвердить это, поместив рамку вокруг элемента h1.

Paulie_D
8 апреля 2018 в 09:10
1

Связано... если не обман - coderhelper.com/questions/37406353/…

Paulie_D
8 апреля 2018 в 09:11
0

...или coderhelper.com/questions/34995740/…

Fernando Hernandez
8 апреля 2018 в 18:49
1

Align-self: center не будет работать, потому что элемент занимает 100% ширины контейнера, даже если вы видите пустое пространство. Таким образом, единственный способ — уменьшить ширину h1.

Ответы (1)

avatar
Fernando Hernandez
8 апреля 2018 в 19:03
1

Это то, что вы ищете?

.container {
 width: 250px;
 background-color:tomato;
 display: flex;
 flex-direction: column;
 justify-content: center;
}

h1 {
width: 90%;
margin-left: auto;
margin-right: auto;
border: 1px solid white;
}