How do I center images in a WP gallery?

Hi Mark,

Thanks. Okay so based on your structure, I would recommend using SiteOrigin Page Builder and waiting for the next Page Builder Update. This update, which currently has an ETA of Wednesday, will include functionality that will allow you to easily vertically alignment widgets within the specific row and thus easily do this without using CSS.

Regardless of whether you wish to wait or not, you’ll need to split the gallery up into multiple rows/galleries as vertical alignment doesn’t play well with multi-row setups. I know it’s a pain but it’s sadly unavoidable.

If you would like to do this before the update, please add the following CSS to WP AdminAppearanceCustom CSS:

@media (min-width: 780px) {
	.page-id-37 .gallery {
		display: flex;
		justify-content: center;
		align-items: center;
	}
}

Please note that this CSS will not look good until you’ve restructured the images into multiple galleries.
You might also need to install the SiteOrigin CSS Editor.

Hi Spentcartridge,

Please note that the update I was talking about in my last post has been released.

SiteOrigin Page Builder works on a widget system. If you want to do X, you’ll need a widget that X. Y? Need a widget that does Y. Does that make sense?

With that said, you can do this with the SiteOrigin Editor widget or the SiteOrgin Image widget. The latter being more recommended for this and both are included in the SiteOrigin Widgets Bundle.

I would recommend giving the getting started guide a read through.

Hi Spentcartridge,

Please open the row housing the images by clicking the wrench icon above the row. head over to the row styles sidebar and open the Layout settings group. Set the Cell Vertical Alignment (it’s the last setting in the layout settings group) to top.

Please ensure that each image is added to a dedicated Image widget in its own column. The ideal setup being: