内容不以移动设备为中心

Question

就是title。我尝试了很多不同的解决方案，但似乎没有一个能解决我的问题。当内容足够小时，网站本身就会居中，但如果内容超过了设备的尺寸，它就会向右延伸。下面是该站点的代码:

body {
background: url("fireworkplusothers-20.jpg");
color: black;
}

/* unvisited link */
a:link {
color: white;
}

/* visited link */
a:visited {
color: grey;
}

/* mouse over link */
a:hover {
color: grey;
}

/* selected link */
a:active {
color: white;
}

<center>
<p style="text-align: center; font-family: 'Courier New', monospace;"><b> <a href=photo.html>+</a> &nbsp; <a href=tooth.html>+</a> &nbsp; <a href=perfect.html>+</a> &nbsp; <a href=nn1.html>+</a> &nbsp; <a href=nn1.html>+</a> &nbsp; <a href=about.html>+</a></b></p>
<img src="SP_ribcage.png" alt="idk" class="center" width="1000" height="666.66">
</center>

感谢帮助，这是我的第一个网站:D

Answer 1

这是因为1000px超过了设备的屏幕大小，所以会溢出。

解决这个问题的一种方法是在CSS中使用max-width。通过将max-width设置为1000px，将width设置为100%，如果屏幕尺寸超过1000px，则宽度设置为1000px，否则设置为屏幕尺寸

的例子:

img {
max-width: 6000px; /* absurdly large picture width that won't fit on many screens */
width: 100%;
}

<img src="https://picsum.photos/1920/1080">

了解更多信息:

max-widthat MDN

widthat MDN