I'm bulding my own Wordpress theme and I'm trying to align image to center or side via post editor, but it's still default aligned (left).
In editor it displays properly not on the site though.
Left Alignment To align the image right, click the c alignment icon, then select Align left from the drop-down. Near blocks will be automatically positioned to the right of the image.
To solve this issue, all you need to do is install and activate Auto Upload Images plugin. The plugin will check for external images once you update or save any post or page. You can manually do that for each post or page or you can bulk edit all posts and simply click the update button.
The accepted answer did not work for me, for those developing a theme from scratch who encounter the same issue, adding the following code to the themes style sheet worked for me:
img.alignright { float: right; margin: 0 0 1em 1em; }
img.alignleft { float: left; margin: 0 1em 1em 0; }
img.aligncenter { display: block; margin-left: auto; margin-right: auto; }
.alignright { float: right; }
.alignleft { float: left; }
.aligncenter { display: block; margin-left: auto; margin-right: auto; }
Source: https://codex.wordpress.org/Wrapping_Text_Around_Images
You haven't shared your code...but you need to ensure you include WordPress-generated classes in your theme's CSS files:
/* =WordPress Core
-------------------------------------------------------------- */
.aligncenter,
div.aligncenter {
display: block;
margin: 5px auto 5px auto;
}
a img.aligncenter {
display: block;
margin-left: auto;
margin-right: auto
}
Of course, you can modify these classes as needed.
img.alignright { float: right; margin: 0 0 1em 1em; }
img.alignleft { float: left; margin: 0 1em 1em 0; }
img.aligncenter { display: block; margin-left: auto; margin-right: auto; }
.alignright { float: right; }
.alignleft { float: left; }
.aligncenter { display: block; margin-left: auto; margin-right: auto; }
apply this css to get align class feature
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With