html - 在多列布局中唯一的元素时如何居中

我正在将动态图像拉到一个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的回答和列跨度，下面添加的CSS将第一个也是唯一一个项目集中在两列布局中：

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

此外，要以两列布局中的最后一项为目标，如果它是其行中的唯一项，我现在使用：

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

最佳答案

你的标记和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元素之后没有高度，因为里面没有任何东西是静态的。我也看不出一个明显的方法来解决它。也许有人可以借鉴这个想法？

关于html - 在多列布局中唯一的元素时如何居中，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/40921259/