So you've got yourself a shiny new self-hosted WordPress blog. You create a post or page, insert an image, and decide to centre it (or 'center' it if you're not a Brit like me!) using the "align centre" button in the post editor. The image looks centered in the editor... but when you publish the post, it's still left aligned. What gives?
The 'Align centre' button within WordPress's so-called 'Kitchen Sink'
When you centre an image in WordPress like this, it is given a CSS class of "aligncenter". However it's up to your theme, or more specifically your theme's stylesheet, to say what that class actually does. If your WordPress site is not playing ball, it may be that your theme is missing the bit of code that does that.
The good news is, it's easily fixed. You will need to add the snippet below to your theme's CSS:
1 2 3 4 5 6 7 | img.aligncenter { margin-left:auto; margin-right:auto; display:block; max-width:100%; height:auto; } |
Your particular theme may have an option to add CSS without delving into the stylesheet itself - and if it does, use that. However, if it doesn't, follow the below steps:
Et voila! You may have to hard refresh your browser (press the Ctr and F5 keys together) before you see the change take effect.