Align an Image in a WordPress Page
Ever wanted to float your images?
This means that the image sits flush against the left or right margin, and the text flows around it. Just like the Chapter 1 image to the right.
You can float images in a WordPress page using the default Add an Image function.
1. Open your page editor
2. Notice the Add media toolbar and the Add an Image icon (left hand icon)
3. Click on Add an Image, upload your image from your PC or select an image from media library
4. Notice the Alignment options for adding an image. Simply choose Left, Center or Right to align your image, and then click the Insert image into post button.
How to float images with HTML
If you switch from Visual to HTML view in your editor, you’ll be able to see that images are floated using a CSS class.
For example, this is the image tag for the first image on this page:
<img class="alignright" src="http://om4.com.au/wp-content/uploads/chapter1-sml-web.jpg" alt="Chapter 1" />
You can change class=”alignright” to class=”alignleft” to change the way the image floats. The CSS rules for alignright, alignleft, aligncenter and alignnone are available as part of the default OM4 CSS style sheet.
About float
When you use class=”alignright” or class=”alignleft”, the CSS float rule is being used on the image.
If you have several floated items in close proximity, it can help if you can think of the float rule as “float everything that follows around me”.
