当它是多列布局中唯一的一个项目时如何居中

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 列布局中定位 last 项目，如果它是其行中的唯一项目，我现在使用此：

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 元素之后没有高度，因为它里面没有任何东西是静态的。我也没有看到清除它的明显方法。也许有人可以以此为基础？

当它是多列布局中唯一的一个项目时如何居中

how to center an item when it's the only one in a multi-column layout

html

css

css-multicolumn-layout