У меня есть гибкий контейнер с некоторым текстом (например, 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>
Ваш элемент h1 уже занимает всю ширину своего родителя. Вот почему часть встроенного текста (sdfsdlfkjs) возвращается на новую строку, потому что она не может полностью вписаться в ширину своего родителя. Вот почему вы не можете центрировать элемент h1 внутри его родителя, потому что он уже занимает всю ширину своего родителя. Вы можете просто подтвердить это, поместив рамку вокруг элемента h1.
Связано... если не обман - coderhelper.com/questions/37406353/…
...или coderhelper.com/questions/34995740/…
Align-self: center не будет работать, потому что элемент занимает 100% ширины контейнера, даже если вы видите пустое пространство. Таким образом, единственный способ — уменьшить ширину h1.