html - 放大时我所有的 h1 标签都在右边

Question

我是新手，我不知道为什么放大时我的 h1 标签内的文本会向右移动。

这是 CSS 代码:

h1 {
    font-family: 'Raleway', sans-serif;
    border-bottom: 1px solid black;
    border-top: 1px solid black;
    margin-right: 500px;
    margin-left: 500px;
    text-align: center;
}

此外，我没有使用 <div>因为当我开始编码时，我不知道它是干什么用的。我试图改变它，但一切都是围绕我目前的技术构建的。

谢谢。

Answer 1

鉴于您刚刚开始编写代码 - 这看起来很棒!

我刚开始的时候也做过同样的事情，我很确定大多数人都这样做。但就像评论说的那样 - {margin: 0 auto} 效果最好。 Div 非常非常重要。

使用 chrome 的开发工具 - 这是快速添加和删除 CSS 规则的好方法。
查看 -> 开发人员 -> 开发人员工具。 通过可折叠菜单导航到标题，单击它并注意右侧的相关规则。取消选中 Your margin left 和 right 以测试 CSS 规则。

您需要删除 margin-left: 和 right 500px；

我仍然会建议这样的事情

<div id="container">
<h1> Your Header </h1>
</div>

这样，您就可以在您的 css 中仅针对容器的 div 中的 h1

#container h1 {
text-align:center
}
 #container{
 margin: 0 auto;
}

如果有效，请标记已回答