h1左margin失效如何解决？如何将h1文本移至屏幕中部

问题原因 #

你的h1是默认块级元素，宽度会自动填满父容器（.menu div，占屏幕宽度80%）。此时设置margin-left，浏览器会自动调整h1的宽度抵消margin值，导致视觉上看不到位置变化——因为h1的总宽度（width + margin-left + margin-right）仍等于父容器宽度，文本仅缩进而非整体移动。

解决方案 #

方案1：直接让文本居中（最简单） #

如果目标是让h1内的文本居中，无需调整margin，直接给h1添加text-align: center即可：

h1 {
    font-size: 16px;
    text-align: center;
}

方案2：用margin调整h1整体位置 #

如果需要手动控制h1偏移位置，先给h1设置固定宽度（或让宽度适配内容），再设置margin：

h1 {
    font-size: 16px;
    width: fit-content; /* 让宽度刚好包裹文本内容 */
    margin-left: 5%; /* 百分比基于父容器的80%宽度计算 */
}

若要让h1整体在父容器中居中，可使用：

h1 {
    font-size: 16px;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
}

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