html - 当它是多列布局中唯一的一个元素时如何居中

Question

我正在将动态图像拉入 2 列布局。如果只有一张图片，我如何将它居中或将列折叠成一个？当前，单个图像放置在左列中。是否有仅 CSS 的解决方案？

如果列中的最后一项是所在行中的唯一一项，那么相同的逻辑是否适用于该列中的最后一项？

p{
  column-count: 2;
  column-gap: 0;
}

p>img{
  display: block;
  width: 100%;
  height: auto;
  border: 3px solid transparent;
  box-sizing: border-box;
}

---

感谢 Eric N 的回答和 column-span，以下添加的 CSS 将第一个也是唯一一个元素置于 2 列布局中:

p>img:first-of-type:last-of-type{
  column-span: all;
  margin: auto;
  width: 50%;
}

---

此外，要定位 2 列布局中的最后项，如果它是其行中的唯一项，我现在使用这个:

p>img:nth-child(odd):last-of-type{
  column-span: all;
  margin: auto;
  width: 50%;
}

Answer 1

您的标记和 CSS 会有很大帮助。但是，如果没有它，您可能只能通过使用以下方法来定位单个元素:

img:first-of-type:last-of-type { 
    /* centering styles */ 
}

编辑:

看到 css 后，这变得非常棘手。我想到了这个令人毛骨悚然的技巧:

p>img:first-of-type:last-of-type {
  position: absolute;
  left: 50%;
  width: 50%;
  transform:translateX(-50%);
}

这就完成了工作...除了 p 元素之后没有高度，因为它里面没有任何东西是静态的。我也没有看到清除它的明显方法。也许有人可以以此为基础？