为什么这个跨度不在这个h1中？

Question

我不明白为什么这不会导致＆＃34;目录＆＃34;文本居中。我试图了解基本面并使用最佳实践，但我需要一点方向。

HTML：

<div id='main'>
  <h1><span id='toct'>Table of Contents</span></h1>
</div>

CSS：

#main{
  display: inline-block;
  margin: auto;
  width: 40%;
}

#toct {
  margin: auto;
  width: 10%;
}

Answer 1

运行此代码段。我制作了背景浅蓝色，这样你就可以看到<h5>。 <h1>不适合包装盒。

#main{
  display: inline-block;
  margin: auto;
  width: 40%;
}#toct {
  margin: auto;
  width: 10%;
}
h5{
  background-color:lightblue;
  text-align:center;
}

<div id='main'>
  <h5><span id='toct'>Table of Contents</span></h5>
</div>