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>