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;。

Answer 4

尝试：

#imageContainer{ text-align: center; }

和其余的（span和h1）

display: inline-block; 或 display: inline;

为什么不是我的text-align：center;好好工作？

4 个答案: