Welcome to image alignment! The best way to demonstrate the ebb and flow of the various image positioning options is to nestle them snugly amongst a sea of words. Grab a paddle and let’s get started.
On the subject of alignment, it should be noted that users can choose from the following options: None, Left, Right, and Centre. In addition, they also have the option of Thumbnail, Medium, Large & Full size.
The image above happens to be centred.
The rest of this paragraph is filler to demonstrate how the text wraps around the 150×150 image, which is left-aligned.
As you can see, there should be some space above, below and to the right of the image. The text shouldn’t encroach on the image. Encroachment just isn’t right. Images need breathing space too. Let them speak just like your words. Let them do their job without any interference from the text. In about one more sentence here, we’ll see that the text moves from the right-hand side of the image down below it in a seamless transition. Again, letting it do its thing. Mission accomplished!
And now for a an extremely large image. It also has non-alignment.
The image above, although 1200px wide, should not extend beyond the content area. It should remain within the content area without visibly disrupting the flow of content.
And now we’re going to move on to the right-align. Again, there should be plenty of space above, below and to the left of the image. Just look at him there… Hey, mate! You’re really nailing that right-hand side. I don’t care what the left-aligned image says, you look great. Don’t let anyone else tell you otherwise.
In just a moment, you should see the text start to wrap around the right-aligned image and settle in nicely. There should still be plenty of space and everything should look just right. Yeah… Just like that. It’s never felt so good to be right.
And just when you thought we’d finished, we’re going to do them all over again with captions!
The image above happens to be centred. The caption also contains a link, just to see if it does anything odd.
The rest of this paragraph is filler to demonstrate how the text wraps around the 150×150 image, which is left-aligned.
As you can see, there should be some space above, below and to the right of the image. The text shouldn’t encroach on the image. Encroachment just isn’t right. Images need breathing space too. Let them speak for themselves, just like your words. Let them do their job without any interference from the text. In about one more sentence here, we’ll see that the text moves from the right-hand side of the image down below it in a seamless transition. Again, letting it do its thing. Mission accomplished!
And now for a an extremely large image. It also has non-alignment.
The image above, although 1200px wide, should not extend beyond the content area. It should remain within the content area without visibly disrupting the flow of content.
And now we’re going to move on to the right-align. Again, there should be plenty of space above, below and to the left of the image. Just look at him there… Hey, mate! You’re really nailing that right-hand side. I don’t care what the left-aligned image says, you look great. Don’t let anyone else tell you otherwise.
In just a moment, you should see the text start to wrap around the right-aligned image and settle in nicely. There should still be plenty of space and everything should look just right. Yeah… Just like that. It’s never felt so good to be right.
And that’s a wrap, mate! You’ve survived the turbulent waters of alignment. Image alignment achievement unlocked!