为什么我的文本在添加宽度后会回到左侧，以便我的背景与文本保持一致？

Question

因此，当我将 width 引用添加到我的 #information h1 id 时，它完全忽略 text-align: center; 引用并将文本/背景放在左侧而不是中心

所以基本上我需要帮助让标题以正确的背景宽度居中，这样它就不会背景空白

正如你所知，我是全新的 - 这是我第一次尝试 html 和 css - 一两天前开始我的课程

CSS

#information h1{
    text-align: center;
    font-family: Tahoma;
    color: lightcoral;
    background-color: whitesmoke;
    width: 130px;
    margin: 2px;
    border-radius: 25px;
    box-shadow: 2px 2px 2px grey;
    font-size: 25px;
}

HTML

  <section id="information">
    <h1>Information</h1>
    <p>Currently starting my course on becoming a full stack engineer while working on a BS in Computer Science. Open to pretty much anything!<br>
      Looking for part time or full time work while I attend school and courses also open to any development projects!
    </p>
    <h1>Hobbies + More</h1>

带宽度参考

无宽度参考

Answer 1

使用

text-align: center

 使文本居中，使文本在元素内

居中（在您的情况下为 h1）。如果将元素

width

设置为 130 像素，它会将文本

在 130 像素内居中。元素本身仍然从其容器的左侧开始（在您的情况下是主体）。

只是不要像之前那样设置宽度。

Answer 2

    #information h1{
        text-align: center;
        font-family: Tahoma;
        color: lightcoral;
        background-color: whitesmoke;
        margin: 2px;
        padding:0 10px;
        border-radius: 25px;
        box-shadow: 2px 2px 2px grey;
        font-size: 25px;
        display: inline;
    }
    #information {
        text-align: center;
    }

    <section id="information">
        <h1>Information</h1>
        <p>Currently starting my course on becoming a full stack engineer while working on a BS in Computer Science. Open to pretty much anything!<br>
          Looking for part time or full time work while I attend school and courses also open to any development projects!
        </p>
        <h1>Hobbies + More</h1>
    </section>