h1 рамка только вокруг текста

Question

У меня есть h1, и я хочу поставить рамку только вокруг внутреннего текста.Проблема в том, что граница будет естественным образом заполнять весь блок, что означает, что она покрывает длину страницы.

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

Как получить границу, чтобы обернуть только текст?

Answer 1

Просто дайте элементу display из inline-block и примените text-align: center к родительскому элементу:

h1 {
  display: inline-block;
  border: 1px solid black;
}

div {
  text-align: center;
}

<div>
  <h1>Title</h1>
</div>