如何使h1标签以其实际宽度居中

Question

我需要使 h1 标签居中，还需要在其周围制作边框。为了防止占用更多宽度，我给出了display: inline-block 但标签没有响应text-align: center。

h1 {
  text-align: center;
  border: 1px solid;
  display: inline-block;
}

<div class="container">
  <h1>This is the Title</h1>
</div>

Answer 1

您可以display: table在标题上使用。这将使标题的宽度取决于其内容，同时它也将保持块级元素。您可以使用margin: 0 auto属性将其居中。

.heading {
  border: 1px solid black;
  display: table;
  margin: 0 auto;
  padding: 5px;
}

<h1 class="heading">Heading 1</h1>

Answer 2

将以下内容放在父标签而不是h1标签 上

text-align: center;