Html 移动站点的图片对齐问题

我是一个初学者，刚刚完成了我的音乐组的第一个网站。它在桌面上看起来很棒

看看！grnbrier.com

手机上的照片都是乱七八糟的

这是我的代码。有谁能告诉我我做错了什么，或者有什么方法可以让它在手机上看起来更好

身体{
背景颜色：黑色
}
.图像边距{
左边距：525px；
}

这是因为您使用

.image margin

类为第一张图像设置了剩余的边距。它不仅在移动设备上看起来不居中，而且在其他分辨率中也会发生，与您设计它时使用的分辨率不同

您可以尝试将图像包装在

div

元素中。然后可以将

display:flex

属性设置为该div，然后开始使用aligment和justify属性

例如：

<div class="my-flex-div">
  <a href="#"><img src="myimage.jpg/></a>
  <a href="#"><img src="myimage.jpg/></a>
  <a href="#"><img src="myimage.jpg/></a>
</div>

为了了解更多关于flex的信息，我推荐您

然后，为了让它在手机上看起来好看，你可以开始使用媒体查询

@media only screen and (max-width: 600px) {
  .my-flex-div {
    flex-direction: column;
  }
}

了解有关媒体查询的信息

@media only screen and (max-width: 600px) {
  .my-flex-div {
    flex-direction: column;
  }
}

---

试着开始玩这些东西，你会得到更好的结果。

嘿！谢谢你的帮助。我替换了代码，现在它看起来像是在桌面和手机上。看起来好多了！我有没有办法让它们彼此更接近，并将它们集中在移动版本上？我无法复制你所看到的方式。我已在此链接中复制了您的站点：。我已将align items:center属性添加到包含媒体查询中图像的div中。过来看