Как поставить по центру заголовок независимо от текста?

Question

[anyachecka]

без ограничения ширины
https://jsfiddle.net/891kpum0/

Comments

[anyachecka]

VicTHOR, желать плохого человеку- это конечно..
=====================
Это имели ввиду?
https://jsfiddle.net/f0nuLvsa/1/

[anyachecka]

VicTHOR, где тут задание? боже мой
я фидл добавляла

[anyachecka]

VicTHOR, для Вас 5.1, 5.16

Answer 1

[Роман]

<h3 class="title">Title</h3>
<h3 class="title">Информация</h3>

.title {
	display: flex;
  justify-content: center;
  font-size: 40px;
	color: red;
	text-transform: uppercase;
	font-weight: 200;
}

.title:before, .title:after {
  flex-grow: 1;
	content: '';
	height: 2px;
  margin: .5em;
	background-color: red;
}

Comments

[anyachecka]

Роман, ноанс в том чтобы по центру был заголовок с линией

[Роман]

И в чем проблема?
Убираете один из псевдоэлементов (тот который не нужен), задаете общую максимальную ширину и margin: 0 auto заголовку. И все, заголовок всегда будет по центру.

ЗЫ. Чтобы было понятно, что именно вам надо, выложите изображение нужного дизайна.

[anyachecka]

Роман, желтый - контейнер, для наглядности

[Роман]

Вам надо, чтобы длина линии зависела от длины слова?

[anyachecka]

Роман, нет
сделать чтобы по центру был текст с линией
вместе

[Роман]

.title {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  width: max-content;

  font-size: 40px;
  color: red;
  text-transform: uppercase;
  font-weight: 200;
}
.title::after {
  content: '';
  min-width: 8ch;
  height: 2px;
  margin: 0 .5em;
  background-color: red;
}

[anyachecka]

Роман, спасибо огромное
ch? есть такое?

[Роман]

Пожалуйста.
ch — величина относительно ширины строчной буквы.

[Андрей Иванов]

https://caniuse.com/ch-unit