Markup: Image Alignment

Wel­come to image align­ment! The best way to demon­strate the ebb and flow of the var­i­ous image posi­tion­ing options is to nes­tle them snug­gly among an ocean of words. Grab a pad­dle and let’s get start­ed.

On the top­ic of align­ment, it should be not­ed that users can choose from the options of NoneLeftRight, and Cen­ter. In addi­tion, they also get the options of Thumb­nailMedi­umLarge & Full­size.

Image Alignment 580x300

The image above hap­pens to be cen­tered.

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

As you can see the should be some space above, below, and to the right of the image. The text should not be creep­ing on the image. Creep­ing is just not right. Images need breath­ing room too. Let them speak like you words. Let them do their jobs with­out any has­sle 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­tion. Again, let­ting the do it’s thang. Mis­sion accom­plished!

And now for a mas­sive­ly large image. It also has no align­ment.

Image Alignment 1200x400

The image above, though 1200px wide, should not over­flow the con­tent area. It should remain con­tained with no vis­i­ble dis­rup­tion to the flow of con­tent.

Image Alignment 300x200

And now we’re going to shift things to the right align. Again, there should be plen­ty of room above, below, and to the left of the image. Just look at him there… Hey guy! Way to rock that right side. I don’t care what the left aligned image says, you look great. Don’t let any­one else tell you dif­fer­ent­ly.

In just a bit here, you should see the text start to wrap below the right aligned image and set­tle in nice­ly. There should still be plen­ty of room and every­thing should be sit­ting pret­ty. Yeah… Just like that. It nev­er felt so good to be right.

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

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

The image above hap­pens to be cen­tered. The cap­tion also has a link in it, just to see if it does any­thing funky.

Image Alignment 150x150
Itty-bit­ty cap­tion.

The rest of this para­graph is filler for the sake of see­ing the text wrap around the 150x150 image, which is left aligned.

As you can see the should be some space above, below, and to the right of the image. The text should not be creep­ing on the image. Creep­ing is just not right. Images need breath­ing room too. Let them speak like you words. Let them do their jobs with­out any has­sle 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­tion. Again, let­ting the do it’s thang. Mis­sion accom­plished!

And now for a mas­sive­ly large image. It also has no align­ment.

Image Alignment 1200x400
Mas­sive image com­ment for your eye­balls.

The image above, though 1200px wide, should not over­flow the con­tent area. It should remain con­tained with no vis­i­ble dis­rup­tion to the flow of con­tent.

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

And now we’re going to shift things to the right align. Again, there should be plen­ty of room above, below, and to the left of the image. Just look at him there… Hey guy! Way to rock that right side. I don’t care what the left aligned image says, you look great. Don’t let any­one else tell you dif­fer­ent­ly.

In just a bit here, you should see the text start to wrap below the right aligned image and set­tle in nice­ly. There should still be plen­ty of room and every­thing should be sit­ting pret­ty. Yeah… Just like that. It nev­er felt so good to be right.

And that’s a wrap, yo! You sur­vived the tumul­tuous waters of align­ment. Image align­ment achieve­ment unlocked!