页眉和页脚不是以移动主题为中心，而是在桌面上？

Question

我刚创建了一个博客，计算机上的一切看起来都很完美，但是当我访问移动网站时：

1. 页眉和页脚未居中
2. 在我的移动网站上的页面上，照片溢出了帖子宽度（即使在桌面上它没有）。

请帮忙，我无法解决问题！对于我的第一个问题（页眉和页脚没有以移动设备为中心）我试过制作边距＆＃34; 0 auto＆＃34;它没有用，第二个问题（手机上的照片溢出）。我已经尝试了图像的最大宽度，但它没有用。

我知道一些代码（我参加过HTML和CSS课程），但我没有移动网站的经验，所以我很感激任何帮助！

以下是我网站的链接：http://apaperescape.tumblr.com/

另外，我不确定需要提供哪些代码，所以请告诉我们！

Answer 1

这里有多个问题。至少在我看来，你的页眉和页脚在移动调试模式下完全居中。也就是说，这里有几个问题：

1. 如果要将内容宽度设置为中心，则需要将内容宽度设置为小于100％。或者你可以使用margin：auto来集中它。

2. 您的图片也需要设置为页面的特定百分比。例如，您可以为图像编写div，将其设置为宽度：80vw，然后将图像显示为：

   background:url("imagehere");
   background-size:contain;
   

或者，您可以将宽度和高度设置为vh或vw百分比，前提是所有图片的宽高比都相同。

您也可以将图像设置为100％，然后让父图像进行缩放。以下是其他一些方法： Contain an image within a div?

1. 页面左侧有多余的填充，即1em。您还有内容div的多余填充，即50px。这导致内容溢出。这很奇怪，但是填充符在100％规则之外，并且可以将其推到120％等等。剪切填充，缩小内容分隔符，然后使用margin：auto来居中。它将以更好的方式显示跨平台MUCH。