Question

在Wordpress帖子中工作，我想并排添加两个图像，并将图像块保持居中（一个对齐左，另一个对齐）。（这是我自己的。）

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

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

我通过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

如果我正确理解了您的目标，您希望在响应式布局中做两件事：

将图像容器（.ps-responsive）切换到50％到100％之间，这样它们就可以从并排到堆叠（它们可以保持向左浮动）
将这些容器的text-align属性切换为左/右和居中，以使其中的图像从这些容器的内边缘到达中心。

看起来你很近但你不需要那么多代码。请参阅此小提琴，了解一个工作示例：https://jsfiddle.net/ds2vuqng/26/

Answer 2

您可以通过以下方式清除css中的浮动：

clear:both;

您还可以使用Bootstrap来修复此问题，并将容器和文本中心用作ps-inner-image-container中类的一部分，如：

<div class="row ps-image-container">
  <div class="container text-center 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>

我不确定这是否能解决您的问题，否则请再写一次： - ）

对2个图像进行居中处理，并在响应时保持图像居中

2 个答案: