h1 仅围绕文本边框

Question

我有一个 h1，我只想在内部文本周围放置一个边框。问题是边框自然会填满整个块，这意味着它会覆盖页面的长度。

我不能把它变成一个跨度，因为我需要文本在页面中间水平居中。

如何让边框只环绕文本？

Answer 1

只需给元素一个 display of inline-block，然后在父元素上应用 text-align: center：

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

div {
  text-align: center;
}

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

h1 border around text only