Tutorial part 3: Align and Float image.
Today I decided write about Align and float images . If you don't know about class="pull right and class="pull-left" classes, please read my article that I had written about it.
Tutorial part 2: Change layout and text of posts
For your information this is the original size of this picture.
Pull-right
Example 1
<h2></h2>
<div class="pull-right">
https://steemitimages.com/DQmW53Rdc4VSGuVJqhX7utSPRyhhaZnGCSVt1fyJKkx3eKj/IMG_20180112_140218.JPG
</div>
Example 2
<div class="pull-right">
<div class="pull-left"> https://steemitimages.com/DQmW53Rdc4VSGuVJqhX7utSPRyhhaZnGCSVt1fyJKkx3eKj/IMG_20180112_140218.JPG
</div>
</div>
Example 3
<div class="pull-right">
<div class="pull-left"> </div>
<div class="pull-left"> https://steemitimages.com/DQmW53Rdc4VSGuVJqhX7utSPRyhhaZnGCSVt1fyJKkx3eKj/IMG_20180112_140218.JPG
</div>
</div>
Text and Image
Example 1
<div class="pull-right">
https://steemitimages.com/DQmW53Rdc4VSGuVJqhX7utSPRyhhaZnGCSVt1fyJKkx3eKj/IMG_20180112_140218.JPG
</div>
<div class="text-justify">
Do you know that you can align or float images with the help pull-right image and pull-left image? There are two functions of these classes, the first primary feature of them is float elements to the right or the left in a horizontal direction. But if the width size of your image is larger than the width of its container, the second function of pull-left or right classes will be to reduce the size of the big image by automatically.
</div>
Example 2
<div class="pull-right">
<div class="pull-left"> https://steemitimages.com/DQmW53Rdc4VSGuVJqhX7utSPRyhhaZnGCSVt1fyJKkx3eKj/IMG_20180112_140218.JPG
</div>
</div>
<div class="text-justify">
Do you know that you can align or float images with the help pull-right image and pull-left image? There are two functions of these classes, the first primary feature of them is float elements to the right or the left in a horizontal direction. But if the width size of your image is larger than the width of its container, the second function of pull-left or right classes will be to reduce the size of the big image by automatically.
</div>
Example 3
<div class="pull-right">
<div class="pull-left"> </div>
<div class="pull-left"> https://steemitimages.com/DQmW53Rdc4VSGuVJqhX7utSPRyhhaZnGCSVt1fyJKkx3eKj/IMG_20180112_140218.JPG
</div>
</div>
<div class="text-justify">
Do you know that you can align or float images with the help pull-right image and pull-left image? There are two functions of these classes, the first primary feature of them is float elements to the right or the left in a horizontal direction. But if the width size of your image is larger than the width of its container, the second function of pull-left or right classes will be to reduce the size of the big image by automatically.
</div>
Pull-left
Example 1
<h2></h2>
<div class="pull-left">
https://steemitimages.com/DQmW53Rdc4VSGuVJqhX7utSPRyhhaZnGCSVt1fyJKkx3eKj/IMG_20180112_140218.JPG
</div>
Example 2
<div class="pull-left">
<div class="pull-right"> https://steemitimages.com/DQmW53Rdc4VSGuVJqhX7utSPRyhhaZnGCSVt1fyJKkx3eKj/IMG_20180112_140218.JPG
</div>
</div>
Example 3
<div class="pull-left">
<div class="pull-right"> </div>
<div class="pull-right"> https://steemitimages.com/DQmW53Rdc4VSGuVJqhX7utSPRyhhaZnGCSVt1fyJKkx3eKj/IMG_20180112_140218.JPG
</div>
</div>
Text and Image
Example 1
<div class="pull-left">
https://steemitimages.com/DQmW53Rdc4VSGuVJqhX7utSPRyhhaZnGCSVt1fyJKkx3eKj/IMG_20180112_140218.JPG
</div>
<div class="text-justify">
Do you know that you can align or float images with the help pull-right image and pull-left image? There are two functions of these classes, the first primary feature of them is float elements to the right or the left in a horizontal direction. But if the width size of your image is larger than the width of its container, the second function of pull-left or right classes will be to reduce the size of the big image by automatically.
</div>
Example 2
<div class="pull-left">
<div class="pull-right"> https://steemitimages.com/DQmW53Rdc4VSGuVJqhX7utSPRyhhaZnGCSVt1fyJKkx3eKj/IMG_20180112_140218.JPG
</div>
</div>
<div class="text-justify">
Do you know that you can align or float images with the help pull-right image and pull-left image? There are two functions of these classes, the first primary feature of them is float elements to the right or the left in a horizontal direction. But if the width size of your image is larger than the width of its container, the second function of pull-left or right classes will be to reduce the size of the big image by automatically.
</div>
Example 3
<div class="pull-left">
<div class="pull-right"> </div>
<div class="pull-right"> https://steemitimages.com/DQmW53Rdc4VSGuVJqhX7utSPRyhhaZnGCSVt1fyJKkx3eKj/IMG_20180112_140218.JPG
</div>
</div>
<div class="text-justify">
Do you know that you can align or float images with the help pull-right image and pull-left image? There are two functions of these classes, the first primary feature of them is float elements to the right or the left in a horizontal direction. But if the width size of your image is larger than the width of its container, the second function of pull-left or right classes will be to reduce the size of the big image by automatically.
</div>
How to center image and text?
There is center tag for it
Example
<center> Text </center>
<center>Link of image </center>
Cheryl and Amber
Don't forget to check out my most recent steemit posts and keep following my post for tutorial part 4. Thank you 😄
There is center tag for it
Example
<center> Text </center>
<center>Link of image </center>
This is sooo cool @arwine
Thank you very much.
Trying to type it in the reply box. But I can't. Should try to use it in my next post.
Thank you for sharing.
Cheers.
My pleasure 😊.. Good idea.. Nanti sy buat tutorial mcm mana mo post di reply box.. Thanks for the tips.. @papanog
Thanks
You are getting better and better at it ... Cheers
Thank you Simon. 😊
I like your tutorial. It's easy to understand. Thanks