Markup: Image Alignment

Welcome to image align­ment! The best way to demons­tra­te the ebb and flow of the various image posi­tio­ning opti­ons is to nest­le them snug­gly among an oce­an of words. Grab a padd­le and let’s get started.

On the topic of align­ment, it should be noted that users can choo­se from the opti­ons of NoneLeftRight, and Center. In addi­ti­on, they also get the opti­ons of ThumbnailMediumLarge & Fullsize.

Image Alignment 580x300

The image abo­ve hap­pens to be cen­te­red.

Image Alignment 150x150The rest of this para­graph is fil­ler for the sake of see­ing the text wrap around the 150x150 image, which is left ali­gned.

As you can see the should be some space abo­ve, below, and to the right of the image. The text should not be cree­ping on the image. Creeping is just not right. Images need breat­hing room too. Let them speak like you words. Let them do their jobs without any hass­le from the text. In about one more sen­tence here, we’ll see that the text moves from the right of the image down below the image in seam­less tran­si­ti­on. Again, let­ting the do it’s thang. Mission accomplished!

And now for a mas­si­ve­ly lar­ge image. It also has no align­ment.

Image Alignment 1200x400

The image abo­ve, though 1200px wide, should not over­flow the con­tent area. It should remain con­tai­ned with no visi­ble dis­rup­ti­on to the flow of content.

Image Alignment 300x200

And now we’­re going to shift things to the right align. Again, the­re should be ple­nty of room abo­ve, below, and to the left of the image. Just look at him the­re… Hey guy! Way to rock that right side. I don’t care what the left ali­gned image says, you look gre­at. Don’t let anyo­ne else tell you differently.

In just a bit here, you should see the text start to wrap below the right ali­gned image and sett­le in nice­ly. There should still be ple­nty of room and ever­ything should be sit­ting pret­ty. Yeah… Just like that. It never felt so good to be right.

And just when you thought we were done, we’­re going to do them all over again with captions!

Image Alignment 580x300
Look at 580x300 get­ting some cap­ti­on love.

The image abo­ve hap­pens to be cen­te­red. The cap­ti­on also has a link in it, just to see if it does anything funky.

Image Alignment 150x150
Itty-bit­ty caption.

The rest of this para­graph is fil­ler for the sake of see­ing the text wrap around the 150x150 image, which is left ali­gned.

As you can see the should be some space abo­ve, below, and to the right of the image. The text should not be cree­ping on the image. Creeping is just not right. Images need breat­hing room too. Let them speak like you words. Let them do their jobs without any hass­le from the text. In about one more sen­tence here, we’ll see that the text moves from the right of the image down below the image in seam­less tran­si­ti­on. Again, let­ting the do it’s thang. Mission accomplished!

And now for a mas­si­ve­ly lar­ge image. It also has no align­ment.

Image Alignment 1200x400
Massive image com­ment for your eyeballs.

The image abo­ve, though 1200px wide, should not over­flow the con­tent area. It should remain con­tai­ned with no visi­ble dis­rup­ti­on to the flow of content.

Image Alignment 300x200
Feels good to be right all the time.

And now we’­re going to shift things to the right align. Again, the­re should be ple­nty of room abo­ve, below, and to the left of the image. Just look at him the­re… Hey guy! Way to rock that right side. I don’t care what the left ali­gned image says, you look gre­at. Don’t let anyo­ne else tell you differently.

In just a bit here, you should see the text start to wrap below the right ali­gned image and sett­le in nice­ly. There should still be ple­nty of room and ever­ything should be sit­ting pret­ty. Yeah… Just like that. It never felt so good to be right.

And that’s a wrap, yo! You sur­vi­ved the tumul­tuous waters of align­ment. Image align­ment achie­ve­ment unlocked!