为什么我的text-align: center；不能正常工作？

Question

为什么我的text-align: center;不工作？text和span应该在图像的中心，(我在这方面有点新手，请理解)。

HTML看起来像这样：

<div id="image">
    <div id="imageContainer">
        <span><h1>Responsive Web</h1></span>
    </div>
</div>

CSS看起来像这样：

   #imageContainer h1 {
    text-align: center;
    font-size: 60px;
    color: white;
    letter-spacing: 0.05em;
    } 
    #imageContainer span {
    display: inline-block;
    padding: 0.5em 0.2em;
    border: white solid 10px;
   }

我不明白为什么它不工作，我的H1标签不侦听我的text-align: center;，我的span也不侦听。这可能是一个新手问题，(笑)但这让我很困惑，请帮帮忙！

Answer 1

删除显示属性

#imageContainer span {

padding: 0.5em 0.2em;
border: white solid 10px;
}

Answer 2

或将宽度设置为: 100%

#imageContainer span {
  width: 100%;
}

Answer 3

当您将display: inline-block;分配给span时，span的宽度仅与其内容相同。您必须将其width设置为100%才能使其正常工作，或者删除display: inline-block;。