Page Image Alignment

Welcome 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 None, Left, Right, and Center. In addi­tion, they also get the options of Thumbnail, Medium, Large & Fullsize. Be sure to try this page in RTL mode and it should look the same as LTR.

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

The rest of this para­graph is filler for the sake of see­ing the text wrap 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 should not be creep­ing on the image. Creeping 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. Mission accom­plished!

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

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.

And we try the large image again, with the cen­ter align­ment since that some­times is a prob­lem. 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.

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!

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.

The rest of this para­graph is filler for the sake of see­ing the text wrap around the 150×150 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. Creeping 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. Mission accom­plished!

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

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.

And again with the big image cen­tered. 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.

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! Last thing is a small image aligned right. Whatever fol­lows should be unaf­fect­ed.