html - 将 2 个图像 block 居中并在响应时保持图像居中

Question

在 Wordpress 帖子中工作，我想并排添加两张图片并使图片 block 居中(一张左对齐，另一张右对齐)。 (我自己就有了。)

当页面尺寸较小时，我希望图像堆叠。 (我有。)

但在这种响应模式下，图像不会在页面中居中。第一个在左边，另一个在右边。

我已经通过 WP 尝试过不同的图像对齐方式，但我无法组合使用。

这是我的 html:

<div class="ps-image-container">
  <div class="ps-inner-image-container">
    <div class="ps-responsive">
      <img src="https://passports. ... " class="alignleft" />
    </div>
    <div class="ps-responsive">
      <img src="https://passports. ... " class="alignright" />
    </div>
  </div>
</div>

和CSS:

.ps-image-container {
    display: block;
  /*width: 98%;
  margin: 0 auto;*/
}

.ps-inner-image-container {
  /*display: block;*/
  width: 98%;
  margin: 0 auto;
}

.ps-image-container::after {
  content: "";
  display: table;
  clear: both;
}

.ps-responsive {
    width: 49.99999%;
    float: left;
}

@media only screen and (max-width: 500px){
    .ps-responsive {
        width: 100%;

    }
}

我遗漏了一些关键概念。

Answer 1

如果我理解你的目标是正确的，你想用你的响应式布局做两件事:

1. 在 50% 和 100% 宽度之间切换图像容器(.ps-responsive)，使它们从并排变为堆叠(它们可以保持向左浮动)
2. 在左/右和居中之间切换这些容器的文本对齐属性，这样它们里面的图像就会从这些容器的内边缘到中心。

看起来你很接近，但你不需要那么多代码。有关工作示例，请参阅此 fiddle :https://jsfiddle.net/ds2vuqng/26/