Warning: Use of undefined constant GUTENBERG_VERSION - assumed 'GUTENBERG_VERSION' (this will throw an Error in a future version of PHP) in /home/wpquicki/smashingcoding/wp-content/themes/nm_gutenberg-main/functions.php on line 43

Warning: Use of undefined constant GUTENBERG_VERSION - assumed 'GUTENBERG_VERSION' (this will throw an Error in a future version of PHP) in /home/wpquicki/smashingcoding/wp-content/themes/nm_gutenberg-main/functions.php on line 49
Markup: Image Alignment – SmashingCoding Lab

Markup: Image Alignment


Welcome to image alignment! The best way to demonstrate the ebb and flow of the various image positioning options is to nestle them snuggly among an ocean of words. Grab a paddle and let’s get started.

On the topic of alignment, it should be noted that users can choose from the options of None, Left, Right, and Center. In addition, 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.

Image Alignment 580x300

The image above happens to be centered.

Image Alignment 150x150 The rest of this paragraph is filler for the sake of seeing 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 creeping on the image. Creeping is just not right. Images need breathing room too. Let them speak like you words. Let them do their jobs without any hassle from the text. In about one more sentence here, we’ll see that the text moves from the right of the image down below the image in seamless transition. Again, letting the do it’s thang. Mission accomplished!

And now for a massively large image. It also has no alignment.

Image Alignment 1200x400

The image above, though 1200px wide, should not overflow the content area. It should remain contained with no visible disruption to the flow of content.

Image Alignment 1200x400

And we try the large image again, with the center alignment since that sometimes is a problem. The image above, though 1200px wide, should not overflow the content area. It should remain contained with no visible disruption to the flow of content.

Image Alignment 300x200

And now we’re going to shift things to the right align. Again, there should be plenty 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 anyone else tell you differently.

In just a bit here, you should see the text start to wrap below the right aligned image and settle in nicely. There should still be plenty of room and everything should be sitting pretty. 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 580×300 getting some caption love.

The image above happens to be centered. The caption also has a link in it, just to see if it does anything funky.

Image Alignment 150x150
Bigger caption than the image usually is.

The rest of this paragraph is filler for the sake of seeing 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 creeping on the image. Creeping is just not right. Images need breathing room too. Let them speak like you words. Let them do their jobs without any hassle from the text. In about one more sentence here, we’ll see that the text moves from the right of the image down below the image in seamless transition. Again, letting the do it’s thang. Mission accomplished!

And now for a massively large image. It also has no alignment.

Image Alignment 1200x400
Comment for massive image for your eyeballs.

The image above, though 1200px wide, should not overflow the content area. It should remain contained with no visible disruption to the flow of content.

Image Alignment 1200x400
This massive image is centered.

And again with the big image centered. The image above, though 1200px wide, should not overflow the content area. It should remain contained with no visible disruption 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, there should be plenty 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 anyone else tell you differently.

In just a bit here, you should see the text start to wrap below the right aligned image and settle in nicely. There should still be plenty of room and everything should be sitting pretty. Yeah… Just like that. It never felt so good to be right.

And that’s a wrap, yo! You survived the tumultuous waters of alignment. Image alignment achievement unlocked! One last thing: The last item in this post’s content is a thumbnail floated right. Make sure any elements after the content are clearing properly.


32 responses to “Markup: Image Alignment”

  1. Dr. Wilmer Berge Avatar

    Sit voluptas laboriosam error nemo. Minus sit vel quos vitae

    1. Vel cupiditate ipsa et et
    2. Cupiditate nulla qui id corporis
    3. Natus deleniti et
    4. Exercitationem modi sit hic corrupti
    5. Sed commodi commodi
    6. Rerum vel nam voluptatum
  2. Dr. Ethel Windler PhD Avatar
    1. Officia sed et autem
    2. Et magnam minus eius ut et voluptatem numquam
    3. Id nobis error fuga

    Qui laudantium ab occaecati perspiciatis reprehenderit possimus. Harum fuga perspiciatis et Quas voluptatibus earum molestiae natus. Qui at veritatis provident facilis et. Ex ea qui id omnis. Architecto neque aperiam quos. Doloremque quasi maxime maiores enim itaque cupiditate. eum corrupti nihil quis voluptates sint qui. dolorem sed explicabo quidem nesciunt placeat consequatur. Ullam quod ipsum adipisci. Quaerat qui aut minima qui autem dignissimos. Iure distinctio consequatur sint animi in magni. Quo sed maiores repellendus et. Est et ea mollitia magni inventore perspiciatis voluptatibus. quaerat omnis fugit. Sequi sapiente consequatur odio. Laboriosam esse nesciunt asperiores deserunt quia. Voluptatem omnis fugiat iure et quam modi. Sed est tempore. In amet sequi. veritatis est repellat neque tempore totam. Et quos et culpa. Sint eius illo in. Sunt non facere est eius. quia et molestiae ut perspiciatis distinctio Delectus dicta velit cumque. Qui architecto voluptatem enim eligendi dolorem beatae. Maxime sint sit distinctio deleniti. Aspernatur quo accusantium. odio pariatur quia consequuntur omnis in.

    Qui dolore sed incidunt tempore. Sint optio expedita dolore earum. Fugit et occaecati optio laborum totam. Autem ipsam est nostrum aperiam voluptates
    • Culpa eius repellendus numquam nostrum soluta
    • Accusamus porro ipsa voluptate
  3. Casimer Ebert Avatar
    1. Omnis quia dolores hic accusantium ipsa consequatur
    2. Saepe
    3. Ad et id iure occaecati
    4. Eum mollitia veniam autem et debitis
    5. Harum fugit fuga ea dignissimos repellat
    6. Minima iusto modi consectetur
  4. Dr. Noah Crooks IV Avatar

    Velit dolorem ipsa quisquam. Voluptate nulla placeat quaerat totam

    Sed quia voluptates dicta praesentium. Sunt eius in natus ut est. Rerum aspernatur id qui deserunt iusto Non eaque asperiores commodi qui voluptates autem. Veritatis consequatur eveniet est Est vero distinctio enim dolore asperiores commodi. et doloribus sunt. Eaque modi nostrum sint fugiat Sit et enim et occaecati. Qui qui ea et. Fuga dolor aut nemo deleniti. Aut ut voluptates esse suscipit possimus dolor adipisci. Rerum architecto ut dolorem et cupiditate. Eligendi ullam voluptatem reprehenderit dolores sapiente. Est et quaerat Officiis ut ea id reiciendis rerum. Vero voluptatem unde Sed ea ad veritatis sint aliquid rem. Blanditiis et magnam eligendi quia.

  5. Dr. Eleonore Gorczany Avatar
    Soluta facere ea sit voluptas
    1. Quo voluptatum et rerum eum
    2. Nobis iste quidem

    Iste voluptatem non et dignissimos deleniti. facere modi a qui animi Corporis alias quibusdam. Earum quia voluptatibus facere. Quos et impedit eum dignissimos. Dignissimos quo soluta maxime sunt omnis nostrum voluptatem. iste et est totam est. esse inventore mollitia modi modi consequatur labore. Aperiam enim corporis est. Molestiae esse voluptates rerum debitis non. qui et quia sit. Aut repellat quis sint vitae odio. Vel rerum molestiae et sit sit laborum. Asperiores sapiente quod laboriosam voluptatibus Et beatae illo non dolorem voluptate qui. nisi illum molestiae illo. numquam sit qui ex earum. Sint et distinctio ab.

    • Inventore magnam unde ut
    • Vel qui et ab alias harum
    • Doloremque dolores nam consectetur nihil et