Archived topic
Centre all images on posts/pages
7 replies · Started by Macca on March 17, 2021
Hi guys,
I am looking at centering all images on posts/pages.
I have a number of posts where images haven't been centered when they've been uploaded, so I'm looking for a CSS change to do that.
Within that, is there a way of italicizing all image captions site wide? Also, is there a way of reducing the paragraph height so my captions are a lot closer to my images?
A good example is here - https://www.greatbritishbucketlist.com/things-to-do-in-devon-in-the-rain/ - where my images aren't centered and all caption paragraph height is larger than I'd like.
I tried to come up with my own custom CSS below which I think worked for centering all captions but not for images:
.post-entry img {
display: block;
margin: 0 auto;
}
.wp-caption.alignnone {
display: block !important;
margin: auto !important;
padding-bottom: 30px;
}
Any help you could give me would be really appreciated!
Cheers,
Macca
Hi Macca,
Try this CSS:
.wp-block-image {
text-align: center !important;
margin-bottom: 0 !important;
}Hi Ying,
That's great! That worked for centering the images.
Do you know if there's anything I can add to reduce the spacing/paragraph height for all images?
Also, is there a way of italicising all captions?
Cheers,
Macca
Since my CSS already removed the big margin bottom underneath the image block, there's a small margin left on top and bottom of the caption like this (orange part)
https://www.screencast.com/t/0tWF7vkZ1T5J
Would you like to get them removed as well?
To give the caption font style, try this CSS:
.wp-block-image figcaption {
font-style: italic;
}Let me know :)
Hi Ying,
Yes please, that would be amazing.
Thanks you so much for this.
Cheers,
Macca
Here you go :)
.wp-block-image figcaption {
margin-top: 0;
margin-bottom: 0;
}Hi Ying,
Thanks very much for this.
I have added all of these CSS changes in. Yesterday they were all working - today they aren't. Any reason why this would be the case?
Again, I've cleared all caches multiple times, so I'm wondering why these aren't expressing or where the override is coming from?
Cheers,
Macca
Hi there,
i just checked the link you provided and that CSS is working... theres a possibility that your ISP has cached the old site - can you test it on a different network?
