Images Won’t Center Align Even After Changing CSS

Erin
(@etheeskimo)

5 years ago
Hi friends,

About a week ago I noticed by images aren’t aligning center in my blog posts, even though they are showing as centered in the editor. A good example of this is on my page: https://homeharmonylouisville.com/2018/08/24/determine-your-clutter-comfort-level/

All of the images are aligned center in the editor. I’ve tried purging my cache, and changing the CSS for my theme (Panoramic Premium). No luck. This is the current CSS for my theme:
```
.aligncenter,
div.aligncenter {
    display: block;
    margin: 5px auto 5px auto;
}

a img.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto
}

.alignleft {
float: left;
}

.alignright {
float: right;
}
```
Help please!
- This topic was modified 5 years ago by Steven Stern (sterndata).
The page I need help with: [log in to see the link]

Viewing 7 replies - 1 through 7 (of 7 total)

Moderator Steven Stern (sterndata)
(@sterndata)

Volunteer Forum Moderator

5 years ago
I’m not sure why, but the “display” descriptor in your CSS is set to “table”. It should be “block”.
```
.wp-block-image .aligncenter, .wp-block-image .alignleft, .wp-block-image .alignright, .wp-block-image.is-resized {
    display: block;
}
```
To add CSS: use the “Additional CSS” option in the customizer. https://codex.wordpress.org/CSS#Custom_CSS_in_WordPress

Learn to use the Chrome Developer Tools to help you see and test changes to your CSS.
Thread Starter Erin
(@etheeskimo)

5 years ago

Thank you! It worked for that page, but not this page,
https://homeharmonylouisville.com/2018/09/02/tips-for-earth-friendly-organization/
or this page,
https://homeharmonylouisville.com/2018/08/28/how-to-create-self-care-routines/
or this page,
https://homeharmonylouisville.com/2018/08/31/30-reasons-to-hire-a-professional-organizer/

More help is much appreciated, thank you!
Moderator Steven Stern (sterndata)
(@sterndata)

Volunteer Forum Moderator

5 years ago
Try
```
.wp-block-image .aligncenter, .wp-block-image .alignleft, .wp-block-image .alignright, .wp-block-image.is-resized {
    display: block;
    text-align:center;
}
```
Thread Starter Erin
(@etheeskimo)

5 years ago

It worked! Thank you so much! I really appreciate your help, thank you again.
MarkRH
(@markrh)

5 years ago
FYI, centering images if using Gutenberg is messed up right now. It creates this CSS for a DIV:
```
.wp-block-image .aligncenter, .wp-block-image .alignleft, .wp-block-image .alignright, .wp-block-image.is-resized {
	display: table;
	margin: 0;
}
```
This overrides the <figure> img class:
```
.aligncenter {
	display: block;
	margin-left: auto;
	margin-right: auto;
}
```
See: Alignment: images cannot be centered on front-end [3.7] · Issue #9503 · WordPress/gutenberg
oviedo93
(@oviedo93)

4 years, 9 months ago
Hello, sometimes these image centering problems can be solved with the !important tag after class. The keyword !important is used to give higher priority to an instruction, so that the following instructions cannot overwrite it. Sometimes you do well in a class, but you don’t overwrite an existing class.

My solution, therefore, is:
.wp-block-image .aligncenter, .wp-block-image .alignleft, .wp-block-image .alignright, .wp-block-image.is-resized {
display: block;
text-align:center!important;
}

[ Signature moderated ]
- This reply was modified 4 years, 9 months ago by oviedo93.
- This reply was modified 4 years, 9 months ago by oviedo93.
- This reply was modified 4 years, 9 months ago by Steven Stern (sterndata).
oviedo93
(@oviedo93)

4 years, 9 months ago
Curiously, the solution I provided the day before yesterday was used in our last project with Elementor [link redacted] . One of the programmers had problems with centering, and with modifying the .css file with the text-align:center!important instruction; everything worked perfectly 😀

Sorry about yesterday’s signature, I saw you moderated it, it won’t happen again. Greetings. Carlos Pérez.
- This reply was modified 4 years, 9 months ago by Steven Stern (sterndata).