I thought about naming this post “Styling WordPress Images for Dummies,” but then I realized that this is not a post for dummies. This is a post for most WP developers I have worked with. I’ve seen many talented WP developers neglect this very important WordPress feature. I am talking about styling images to float around the text using WordPress’ align right, align left, align center, and align none functions.
This is a very simple thing to do, so I am not sure why developers don’t do this. Basically it is just a matter of styling the classes .alignright, .alignleft, .aligncenter, and .alignnone to behave the way the user intended.
For example, below is a common way I style my images. Feel free to use this in your website.
.alignright { float:right; margin:0 0 10px 15px; max-width: 100%; }
.alignleft { float:left; margin:0 15px 10px 0; max-width: 100%; }
.aligncenter { margin:0 auto 15px auto; display:block; max-width: 100%; text-align:center; }
.aligncenter img { display:inline-block; margin 0 auto 5px;}
.alignnone { max-width: 100%; }
This will css will align images right, left, or center depending on what the user chooses, and add 15px of padding below it. It will also add 10px on the inside side of the images so that text will not press up too close to the image. Here is the link to the WordPress Codex that talks about aligning images.
One more thing to note is that I added an .alighcenter img in there. The reason for this is that sometimes, you want to create a box with images. This will do the trick.
The final result is nothing fancy, just consistently aligned images. Below is what the final product looks like:
We need to look at how images, another major feature of most WordPress sites, are used within the site. Images tend to sit on the left, right, or middle of your post, depending upon how you are using them.
A centered image is a little different. It is centered in the middle and the text is pushed above and below it.