How to Align and float images on Steemit

ladyluck (44)in #steemiteducation • 7 years ago

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 tag over the image use and tags

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

Float image Using and tags

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