Images Aligning Left Rather Than Center

It’s a known issue: Alignment: images cannot be centered on front-end [3.7] · Issue #9503 · WordPress/gutenberg

In the mean time, can put the following in your theme’s style.css to correct it (does for me anyway):

/* Gutenberg Tweaks */
.wp-block-image .aligncenter, .wp-block-image .alignleft, .wp-block-image .alignright, .wp-block-image.is-resized {
	margin: auto;
}

@markrh Thank you! Does it matter where in the style sheet? I don’t want to blow up my site. (I’m not a coder, even though I have made some adjustments with fonts, etc.) Thank you again!

Ideally you’re using Child Themes but placing it the bottom will work.

You should be able to also go into the Dashboard -> Appearance -> Customize -> Additional CSS and add it there.

• This reply was modified 6 years, 2 months ago by MarkRH.

@markrh It worked! You’re wonderful! Thank you so much!

• This reply was modified 6 years, 2 months ago by ellenmgregg.

I was having this issue as well. Putting that code in my stylesheet worked. Thanks! @markrh

It works perfect! But when the plugin will be updated will we have to remove this code?

Great question, @alcremi … If @markrh doesn’t know, who do we ask? Or maybe it’ll be obvious. Once we have the update that fixes the alignment, the images will either maintain their center, or migrate. Right? If they migrate, the additional code will probably need to go. Maybe?

Hi, it looks like the bug has been fixed in the latest development version of the plugin. That means that it should be included in the next release.

When they update it odds are nothing visibly will change, images should remain centered. It will probably wind up being redundant CSS and can be removed. Anyway, I’ll know what’s up when it happens. ??

Thanks again, @markrh. I’m marking this thread as resolved. Peace.

@markrh hello can you help me too?
I think I am having the same issues as @ellenmgregg

Here is my blog post,

https://www.kritterkommunity.com/cat-furniture/
the images (some are uploaded, some are affiliate http) will not align. This happens on every blog post after about 2-3 images.

Could you advise? I am very concerned I will mess up my CSS if I blindly add the code above without WP blessing.Thanks a bunch!

@lisakk Really should have made your own thread. Anyway, are you wanting the images to align to the left with the associated text to the right, and then the next image is aligned left, below the first image?

Since I don’t know exactly how you want the images laid out in relation to the text, hard to know what parts to add the CSS. Anyway, you need to add a clear: left; style to clear the previous image’s float: left; style. The following CSS will clear with each image:

.et_pb_post a img {
	height: auto;
	float: left;
	width: 250px;
	left: 0;
	padding-right: 14px;
	padding-bottom: 40px;
	clear: left;
}

@markrh thank you, do I add that in my CSS anywhere?
Mark I cannot seem to add a new post, I could not figure out how to do it my dashboard doesn’t have a ‘addnew’ button. The WP on Twitter was looking into it to find out why. In the meantime, my apologies for tagging on here.
Thank you again!
PS I can’t get the images to align at all, to stay to the left the entire way down OR to center – after 2-3 images, they have a mind of their own and are all over the page.

Add the following to bottom of your theme’s style.css

.et_pb_post a img {
	clear: left;
}

Ideally you’re using Child Themes so if the theme is updated it won’t wipe out your changes, but placing it at the bottom will work.

Alternatively, you should also be able to go into the Dashboard -> Appearance -> Customize -> Additional CSS and add it to the box there.

Mark
Thank you – I added this .et_pb_post a img {
clear: left;
} to the ADDITIONAL CSS and I think for the most part it work?
The text is now messed up a bit, but I might be able to try and align that manually. Or do I add the other code you gave me at first? Here is the updated blog post example:
https://www.kritterkommunity.com/cat-furniture/
Mark on another topic, and I am so sorry for the stupid question, but HOW do I add a new post?? Maybe I am missing something but I do not have anywhere to add a new post? Thank you so much for your help!!!