我是编码的新手，我正在尝试创建一个简单的页面，其中包含标题，地图图片，引脚图片，这些图片会覆盖某个地点的地图图片（I＆＃ 39;这样做而不是仅仅用针制作一个jpeg，因为它会在以后移动），以及它下面的一些信息文本。出于某种原因，当我将地图图像居中时，当我调整窗口大小时，图像图像开始水平移动。我真的很感激一些帮助！
<!DOCTYPE html>
<head>
<title>CampusSpots York University</title>
</head>
<body>
<h1 style= "font-size:9; text-align:center"> York University </h1>
<img src="map.jpg" alt="map" style="width: 650px; height: 450px; margin-left:auto; margin-right:auto"/>
<img src="Pin.png" alt="pin" style="position: fixed; width: 20px; height: 35px; top: 200px;left: 300px;"/>
<p style= "position: relative; bottom: auto; text-align: center"><strong>Important Numbers</strong><br><strong>York Security (General):</strong>416-650-8000<br><strong>York Security (Urgent): </strong>416-736-5333<br><strong>York goSAFE: </strong>416-736-5454<br><strong>Emergency:</strong> 911<br><strong>For General Inquiries:</strong> 416-736-2100<br></p>
</body>
</html>
答案 0 :(得分：0)
您已经改变了内容的中心位置，因此我将根据您的新代码进行回答。有几件事：
您尝试通过定义自动边距来居中第一张图像。这仅适用于块元素，但img元素是内联元素，因此您必须使其阻塞display: block。顺便说一下，你可以简单地使所有边距自动margin: auto，因为你没有真正指定上边距和下边距，但你的方式很好，所以我保持原样。
您的第二张图片必须为position: absolute才能与第一张图片重叠。现在，如果你想将它居中，那么使用left: 50%，然后给它一个负的左边距等于其宽度margin-left: -10px的一半。这将使其与第一张图像完全居中，并且在调整窗口大小时它们将一起移动。如果第二张图像不应该准确地位于中心并且它需要离开中心以重叠第一张图像的某个点，那么更改左边距的值直到得到你想要的结果（或者你可以科学地做到这一点）通过测量第一幅图像上偏离中心的位置，然后减去第二幅图像宽度的一半，然后将结果更改为负值，然后将该值分配给左边距。）
这是一个有效的例子：
<h1 style= "font-size: 9; text-align: center;"> York University </h1>
<img src="map.jpg" alt="map" style="width: 650px; height: 450px; margin-left: auto; margin-right: auto; display: block;"/>
<img src="Pin.png" alt="pin" style="position: absolute; width: 20px; height: 35px; top: 200px; left: 50%; margin-left: -10px;"/>
<p style= "position: relative; bottom: auto; text-align: center"><strong>Important Numbers</strong><br><strong>York Security (General):</strong>416-650-8000<br><strong>York Security (Urgent): </strong>416-736-5333<br><strong>York goSAFE: </strong>416-736-5454<br><strong>Emergency:</strong> 911<br><strong>For General Inquiries:</strong> 416-736-2100<br></p>