werber
@werber
Системный администратор Windows

Как заставить текстовый тег центрироваться с фактической шириной?

Итак, представьте себе, вы решили на сайт разместить заголовок, вы пишите Заголовок, в стилях пишите h1{text-align:center}. Всё хорошо, всё замечательно. Но при этом лично мне нужно, что в том случае, когда слова в заголовке не умещаются в строку и переносятся на другую строку, ширина заголовка формировалась по факту наличия слов.
Вот вам пример:
ec338ad804304e83ac202bf08bdaa413.png
Зелёной рамкой обозначена фактическая ширина h1. Только сейчас слева и справа есть отступы, которые я выделил красным цветом, а нужно, чтобы ширина h1 формировалась по факту того, что написано в h1. Как это сделать?

UPD: Живой пример проблемы: https://jsfiddle.net/egpztqvp/ . Отступы слева и справа быть не должны.
  • Вопрос задан
  • 217 просмотров
Пригласить эксперта
Ответы на вопрос 3
Ankhena
@Ankhena Куратор тега CSS
Нежно люблю верстку
codepen.io/anon/pen/xOakmO
codepen.io/anon/pen/NALxQo с дополнительными span

text-align: justify;
text-align-last: center;
Ответ написан
Комментировать
@devstudent
frontend-developer
по-моему, то что вам нужно, смотрится хуже, чем то, как есть . может и не надо так делать?
Ответ написан
Комментировать
werty1001
@werty1001
undefined
display: inline-block;
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы