html - Place a button right aligned


Translate

I use this code to right align a button.

<p align="right">
  <input type="button" value="Click Me" />
</p>

But P tags wastes some space, so looking to do the same with span or div.


All Answers
  • Translate

    Which alignment technique you use depends on your circumstances but the basic one is float: right;:

    <input type="button" value="Click Me" style="float: right;">
    

    You'll probably want to clear your floats though but that can be done with overflow:hidden on the parent container or an explicit <div style="clear: both;"></div> at the bottom of the container.

    For example: http://jsfiddle.net/ambiguous/8UvVg/

    Floated elements are removed from the normal document flow so they can overflow their parent's boundary and mess up the parent's height, the clear:both CSS takes care of that (as does overflow:hidden). Play around with the JSFiddle example I added to see how floating and clearing behave (you'll want to drop the overflow:hidden first though).


  • Translate

    Another possibility is to use an absolute positioning oriented to the right:

    <input type="button" value="Click Me" style="position: absolute; right: 0;">
    

    Here's an example: https://jsfiddle.net/a2Ld1xse/

    This solution has its downsides, but there are use cases where it's very useful.


  • Translate

    This solution depends on Bootstrap 3, as pointed out by @günther-jena

    Try <a class="btn text-right">Call to Action</a>. This way you don't need extra markup or rules to clear out floated elements.


  • Translate

    It is not always so simple and sometimes the alignment must be defined in the container and not in the Button element itself !

    For your case, the solution would be

    <div style="text-align:right; width:100%; padding:0;">
        <input type="button" value="Click Me"/>
    </div>
    

    I have taken care to specify width=100% to be sure that <div> take full width of his container.

    I have also added padding:0 to avoid before and after space as with <p> element.

    I can say that if <div> is defined in a FSF/Primefaces table's footer, the float:right don't work correctly because the Button height will become higher than the footer height !

    In this Primefaces situation, the only acceptable solution is to use text-align:right in container.

    With this solution, if you have 6 Buttons to align at right, you must only specify this alignment in container :-)

    <div style="text-align:right; width:100%; padding:0;">
        <input type="button" value="Click Me 1"/>
        <input type="button" value="Click Me 2"/>
        <input type="button" value="Click Me 3"/>
        <input type="button" value="Click Me 4"/>
        <input type="button" value="Click Me 5"/>
        <input type="button" value="Click Me 6"/>
    </div>
    

  • Translate

    If the button is the only element on the block:

    .border {
      border: 2px blue dashed;
    }
    
    .mr-0 {
      margin-right: 0 !important;
    }
    .ml-auto {
      margin-left:auto !important;
    }
    .d-block {
      display:block !important;
    }
    <p class="border">
      <input type="button" class="d-block mr-0 ml-auto" value="The Button">
    </p>

  • Translate

    a modern approach in 2019 using flex-box

    with div tag

    <div style="display:flex; justify-content:flex-end; width:100%; padding:0;">
        <input type="button" value="Click Me"/>
    </div>

  • Translate

    Another possibility is to use an absolute positioning oriented to the right. You can do it this way:

    style="position: absolute; right: 0;"
    

  • Translate

    To keep the button in the page flow:

    <input type="button" value="Click Me" style="margin-left: auto; display: block;" />
    

    (put that style in a .css file, do not use this html inline, for better maintenance)


  • Translate

    This would solve it.

    <input type="button" value="Text Here..." style="float: right;">
    

    Good luck with your code!


  • Translate

    In my case the

    <p align="right"/>
    

    worked fine