Html 为什么不是'；该跨度是否以该h1为中心？

我不明白为什么这不会导致“目录”文本居中。我试图理解基本原理并使用最佳实践，但需要一点指导

HTML:

---

运行此代码段。我将背景设置为浅蓝色，以便您可以看到

<代码>不适合放在盒子里

#主{
显示：内联块；
保证金：自动；
宽度：40%；
}#toct{
保证金：自动；
宽度：10%；
}
h5{
背景颜色：浅蓝色；
文本对齐：居中；
}

目录

因为跨距是内联元素，而

边距：自动仅适用于具有设置宽度的块元素。使用
文本对齐：居中
instead@JacobGray，这可能不起作用，您可能还必须使
span
have
display:inline块@TricksfortheWeb仅当OP希望应用宽度时。如果是这种情况，更好的选择是将
设置为
宽度：10%
，并使用
边距：自动
<div id='main'>
  <h1><span id='toct'>Table of Contents</span></h1>
</div>

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

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