I need help with aligning dynamic images in a 2-column layout. What's the best way to center a single image or collapse the columns when there's only one image? Currently, the single image is always placed in the left column. Is there a CSS-only solution for this issue?
Does the same technique apply to the last item in a column if it's the only item on its row?
p{
column-count: 2;
column-gap: 0;
}
p>img{
display: block;
width: 100%;
height: auto;
border: 3px solid transparent;
box-sizing: border-box;
}
Credit goes to Eric N's suggestion and the use of column-span. By incorporating the following additional CSS code, I've managed to center the first and only item in a 2-column layout:
p>img:first-of-type:last-of-type{
column-span: all;
margin: auto;
width: 50%;
}
In addition, to target the last item in a 2-column layout, specifically if it's the only item on its row, I am now implementing the following styling:
p>img:nth-child(odd):last-of-type{
column-span: all;
margin: auto;
width: 50%;
}