How to Align and float images on Steemit

in steemiteducation •  7 years ago 

U5dsUyxgiSbufAAVDE8K7MLNFFENikS_1680x8400.jpg

In this article I want to write about the trick that I have found in recent days. It will be about how to align images on steemit. Yes, You probably know the method that you can float pictures with the help of predefined CSS classes that steemit enable it for us. If you don't know about class="pull-right" and class="pull-left" classes, please read my article that I had written about it. Here is a link that I explain how you resize images by class="pull-left" .

How resize images on steemit - tricks

You can also align or float images with the help of pull-right or pull-left classes. You have to know that 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. Here is below what I am talking about. the original size of this picture is 1680x1050

If we want to align it to the right, see what happened.

<div class="pull-right">
  http://ahdzbook.com/data/out/59/hdwp694716457.jpg
</div>



let us pull the image to the right and then to the left . GET ATTENTION to lines

<div class="pull-right">
    <div class="pull-left">
       http://ahdzbook.com/data/out/59/hdwp694716457.jpg
    </div> 
</div>



let us pull the image to the right, to the left and then to the right step by step.

<div class="pull-right">
    <div class="pull-left">
       <div class="pull-right">
           http://ahdzbook.com/data/out/59/hdwp694716457.jpg
        </div> 
  </div> 
</div>




Let us pull the image to the right and the left. Then we drag the image to the center of right part of whole container for the third time again. if you do not want the image getting smaller, just try this trick.

<div class="pull-right"> 
        <div class="pull-left"> 
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp
       </div>
        <div class="pull-left">
          http://ahdzbook.com/data/out/59/hdwp694716457.jpg    
       </div>  
</div>

                   



How to center image and text?

There is <center> tag for it

<center> Text </center> 
<center>  Link of image    </center> 

Text


How to float image on vertical direction?

just add some <br /> tag over the image use <sub> and <sup> tags

<div class="pull-right">
  <div class="pull-left">
   <br/><br/>http://ahdzbook.com/data/out/59/hdwp694716457.jpg
  </div> 
</div>





Float image Using <sub> and <sup> tags


<div class="pull-right">
  <div class="pull-left">
    <sub><sub>...  ... ..  http://ahdzbook.com/data/out/59/hdwp694716457.jpg  .. ... ... </sub></sub>
  </div> 
</div>
                                                                                                                               

Dont forget to check out my most recent steemit posts

img

Make Your Steemit Posts look like Book Pages


img

Add go to Top button to steemit posts


img

Top 10 Most Beautiful Women - Zimbabwe


You may also like my other posts

img
Size Your Text 📑and Photos 📸 How many you want - micro sizing

img
How resize images on steemit - tricks


img
How to Make Mobile friendly Photo slider◀📸📸📸▶ on Steemit

img
How get more readers for Your old steemit posts? Boost 🚀🚀your views

img
Add Your Popular Posts to sidebar of each blog post - Markdown Trick

img
I try to make my post like my profile


img
Top 10 Russian Beautiful
Women

img
Top 10 Most Beautiful Women in Sports

img
Top 10 Most Beautiful Women In The World

img
10 🔥Beautiful Girls 👯💃of the Day #1


img
Top 10 Most🔥 Beautiful Women💃 in USA


img
Top 30 Most Beautiful Indian Girls 💃💃 in one Picture #1

img
10 🔥Sexy Girls 💃of
the Day #2


img
10 Most Beautiful Woman Golf player in one Picture #2

img
50 Shades of 1 beautiful Girl - Photo🤳


img
👍💥Best Styling guides for your steemit💌 posts (multi columns)


img
🔥Sexy Girl 💃of instagram



img
Check out my steemit posts - All in One - Week #1





If you think How to donate to this ℒady Just upvote this post and follow me if you like it and want to see more.
If you think others will enjoy this Please ReSteem it!

💃 @ℒadyluck
    follow

Authors get paid when people like you upvote their post.
If you enjoyed what you read here, create your account today and start earning FREE STEEM!
Sort Order:  

very good post @ladyluck , thanks for it :)

thank you @youssefs0102 , I am happy you liked it