Would you like tips to improve the layout of your posts with some additional alignment options?
Then please continue reading. I will show you how I personally align images in my own posts on Steemit.
The two main ways of aligning images I will explain are:
Centering Images, with a Title Above
Aligning (Floating) Images Left/Right, with Text Wrapped
Centering Images, with a Title Above
Change the Title to your own. You can also change the source text to whatever you like.
Replace the src and href attribute links as appropriate for your own posts. You can replace the img tag with the one from your image upload host as well (SteemIMG, imgur, etc.).
Also change <h3> to any heading size you want.
If you want better SEO, add the alt="" attribute to the img tag, and the title="" attribute for the <a> tag. Alt is for alternative text in case the image doesn't load, and title gives the link a hover text tool-tip to indicate what the link is for.
<center>
<h3>Title</h3>
<img src="http://img.com/image.jpg" />
<br/>
<em>
<a href="http://source.com/link-to-page">source</a>
</em>
</center>
Collapsed Format
<center><h3>Title</h3>![]()
/img.com/image.jpg" />
http://source.com/link-to-page">source
Ex:
Lorem Ipsum
source
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Code:
<center><h3>Lorem Ipsum</h3>![]()
/www.steemimg.com/images/2016/12/09/lorem-ipsumccd2a.jpg" alt="lorem-ipsumccd2a.jpg" border="0">
http://random-ize.com/lorem-ipsum-generators/lorem-ipsum/">source
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Aligning (Floating) Images Left/Right, with Text Wrapped
Usually this is done for smaller images. I didn't include a Title. Just add one under <center> and above img if you want a Title.
Use the class "pull-right"`` or"pull-left"``` for each side you want to align, pull or float the image.
<div class="pull-right">
<center>
<img src="http://img.com/image.jpg" />
<br/>
<em><a href="http://source.com/link-to-page">source</a></em>
</center>
</div>
Collapsed Format
<div class="pull-right"><center><img src="http://img.com/image.jpg" /><br/><em><a href="http://source.com/link-to-page">source</a></em></center></div>
Ex:
Lorem Ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Code:
<div class="pull-right"><center><img src="http://www.steemimg.com/images/2016/12/09/lorem28bc4.png" alt="lorem28bc4.png" border="0"><br/><em><a href="https://twitter.com/loremipsum_wtf">source</a></em></center></div>
<h3>Lorem Ipsum</h3>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Here are both left and right floated images in combination.
Lorem Ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Section 1.10.32 of "de Finibus Bonorum et Malorum", written by Cicero in 45 BC
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
Code:
<div class="pull-left"><center><img src="http://www.steemimg.com/images/2016/12/09/lorem28bc4.png" alt="lorem28bc4.png" border="0"><br/><em><a href="https://twitter.com/loremipsum_wtf">source</a></em></center></div>
<h3>Lorem Ipsum</h3>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<div class="pull-right"><center><img src="http://www.steemimg.com/images/2016/12/09/lorem-ipsumccd2a.jpg" alt="lorem-ipsumccd2a.jpg" border="0"><br/><em><a href="http://random-ize.com/lorem-ipsum-generators/lorem-ipsum/">source</a></em></center></div>
<h3>Section 1.10.32 of "de Finibus Bonorum et Malorum", written by Cicero in 45 BC</h3>
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
I have created a pastebin file with the centering and floating basics if you need a quick reference to keep on your computer:
Download: pastebin file
Thank you for tuning in, and hopefully these tips are of use to you. Let me know if they are, or if you have other questions. I can possibly make another post to answer it ;)
Thank you for your time and attention! I appreciate the knowledge reaching more people. Take care. Peace.
If you appreciate and value the content, please consider:
