Question

我创建的网站并排有3张图片，中间有一点空间。我已将图像保留在笔记本电脑的中央位置，但当我在另一台屏幕较大的计算机上查看时，图像向左移动而不是停留在中间位置。我的代码如下

HTML：

<a href="MathsGamesYear1.html" id="rotator"><img alt=""     src="Image/Mathsgames.png" /> </a></a>

<a href="InformationBooklet1.html" id="rotator"><img alt="" src="Image/informationbooklet.png" /></a></a>

<a href="Year1QuizPage.html" id="rotator"><img alt="" src="Image/Quizzes.png" /></a></a>

CSS：

#rotator {
display: inline-block;
margin-left: auto;
margin-right: auto;
height: 200px;
padding: 85px;
text-align: center;
}

任何帮助将不胜感激。如果有人知道任何其他方式将3个图像集中在一起并且中间有一些填充，那将是值得赞赏的。

Answer 1

您在所有图片上使用了ID #rotator。一个ID只能在页面上一次，所以那些应该是类。您还要关闭<a>代码两次，而且不需要在html5中/>个<img>代码上跟踪{。}}。

要将它们居中，因为它们是内联内容，您可以将text-align: center;应用于父级。我在代码中看不到父母，所以我添加了一个名为.images

的内容

要在图像之间创建空间，您可以使用左/右边距，我已将其指定为margin: 0 1em，其中1em是左/右边距，因此会2em 1}}图像之间的空间。根据需要调整。您还可以使用.rotator:nth-child(2) { margin: 0 1em; }仅向中心图像应用边距，或者为中心图像指定一个类并使用选择器中的类而不是:nth-child(2)

＆＃13;

.images {
  text-align: center;
}

.rotator {
  display: inline-block;
  height: 200px;
  padding: 85px;
  margin: 0 1em;
}

＆＃13;

<div class="images">
  <a href="MathsGamesYear1.html" class="rotator"><img alt="" src="Image/Mathsgames.png"></a>

  <a href="InformationBooklet1.html" class="rotator"><img alt="" src="Image/informationbooklet.png"></a>

  <a href="Year1QuizPage.html" class="rotator"><img alt="" src="Image/Quizzes.png"></a>
</div>

＆＃13;

Answer 2

它们左对齐，您的笔记本电脑屏幕太窄而无法显示。将它们包装在带有text-align：center：

的容器中

.container{
   text-align:center;
}

https://jsfiddle.net/58fwtu3c/

如何使图像居中间隙

2 个答案: