Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Image alignment not working on my own WP theme

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.

like image 953
justdee Avatar asked Mar 13 '16 12:03

justdee


People also ask

How do I change the alignment of an image in WordPress?

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.

How do I fix common image issues in WordPress?

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.


3 Answers

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

like image 91
Alex Avatar answered Oct 16 '22 13:10

Alex


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.

like image 8
rnevius Avatar answered Oct 16 '22 13:10

rnevius


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

like image 1
manendra Avatar answered Oct 16 '22 12:10

manendra