Html 使用CSS的垂直对齐（具体情况）

我在一家小型非营利组织的网站上兼职，我很难让一些div/元素与不同的屏幕大小保持一致

我正在使用媒体查询和填充以眼睛为中心，但这使得它无法在窗口调整大小时工作。我想我意识到使用百分比填充来居中元素不是正确的方法，但我不知道正确的做法

以下是相关元素的屏幕截图：

这是我的答案

我不会将图像中的所有元素堆叠在页眉中心的每个元素之上，但只会以较小的尺寸进行，但我无法真正理解CSS。谁能给我指一下正确的方向吗

---

谢谢

有很多方法可以做到这一点。最简单的方法可能是在左右两侧使用容器，将其宽度设置为50%，然后向左浮动。然后使用您的媒体查询将它们设置为特定大小的全宽

css:

html:

---

像这样

简单、现代的技术：也许可以考虑使用开箱即用的网格系统，以便为您提供所需的对齐方式，请提供一个。对未来的用户来说，指向即将改变的站点的链接是无用的。尝试调试整个页面是一件痛苦的事情，如果您在我们试图弄清楚发生了什么的过程中对其进行了更改，则更是如此。寻求代码帮助的问题必须包括在问题本身中复制它所需的最短代码。虽然您提供了一个链接，但如果链接无效，您的问题对其他将来遇到相同问题的用户没有任何价值。

.half {float:left; width:50%; text-align:center;}

@media screen and (max-width:800px) {
  .half {width:auto; float:none;}
}

<div class="half">
  <img src="http://placehold.it/350x150">
</div>
<div class="half">
  <img src="http://placehold.it/350x150">
</div>