添加width后h1文本左移，如何实现带合适背景宽度的居中标题？

你遇到的问题根源是：设置固定宽度后，h1 元素本身在父容器里默认左对齐——虽然text-align:center让文字在元素内部居中了，但元素整体偏左，所以看起来像是文字没居中。要实现标题整体居中+背景宽度适配需求，有两种实用方案：

方案1：固定宽度+元素水平居中 #

保留你设置的width:130px，给#information h1添加自动左右外边距，让元素在父容器里水平居中：

#information h1{
    text-align: center;
    font-family: Tahoma;
    color: lightcoral;
    background-color: whitesmoke;
    width: 130px;
    margin: 2px auto; /* 上下边距2px，左右自动平分剩余空间实现居中 */
    border-radius: 25px;
    box-shadow: 2px 2px 2px grey;
    font-size: 25px;
}

修改后，h1元素会在父容器里居中，文字也在元素内部居中，背景保持130px宽度。

方案2：宽度自适应内容+元素水平居中 #

如果不想固定宽度，让背景刚好包裹标题文字，把width:130px换成width: fit-content，再配合自动左右外边距：

#information h1{
    text-align: center;
    font-family: Tahoma;
    color: lightcoral;
    background-color: whitesmoke;
    width: fit-content; /* 宽度自动适配标题文字长度 */
    margin: 2px auto;
    border-radius: 25px;
    box-shadow: 2px 2px 2px grey;
    font-size: 25px;
    padding: 0 10px; /* 可选：给文字左右加内边距，避免文字贴背景边缘 */
}

这个方案更灵活，不管标题文字长短，背景都会刚好包裹，同时整体保持居中。

内容的提问来源于stack exchange，提问作者ツBren