Place a button right aligned
HtmlCssHtml Problem Overview
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>
.
Html Solutions
Solution 1 - Html
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).
Solution 2 - Html
element
on the block
:
If the button is the only .border {
border: 2px blue dashed;
}
.mr-0 {
margin-right: 0;
}
.ml-auto {
margin-left:auto;
}
.d-block {
display:block;
}
<p class="border">
<input type="button" class="d-block mr-0 ml-auto" value="The Button">
</p>
elements
on the block
:
If there are other .border {
border: 2px indigo dashed;
}
.d-table {
display:table;
}
.d-table-cell {
display:table-cell;
}
.w-100 {
width: 100%;
}
.tar {
text-align: right;
}
<div class="border d-table w-100">
<p class="d-table-cell">The paragraph.....lorem ipsum...etc.</p>
<div class="d-table-cell tar">
<button >The Button</button>
</div>
</div>
flex-box
:
With .flex-box {
display:flex;
justify-content:space-between;
outline: 2px dashed blue;
}
.flex-box-2 {
display:flex;
justify-content: flex-end;
outline: 2px deeppink dashed;
}
<h1>Button with Text</h1>
<div class="flex-box">
<p>Once upon a time in a ...</p>
<button>Read More...</button>
</div>
<h1>Only Button</h1>
<div class="flex-box-2">
<button>The Button</button>
</div>
<h1>Multiple Buttons</h1>
<div class="flex-box-2">
<button>Button 1</button>
<button>Button 2</button>
</div>
Good Luck...
Solution 3 - Html
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.
Solution 4 - Html
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>
with span tag
<span style="display:flex; justify-content:flex-end; width:100%; padding:0;">
<input type="button" value="Click Me"/>
</span>
Solution 5 - Html
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.
Solution 6 - Html
<div style = "display: flex; justify-content:flex-end">
<button>Click me!</button>
</div>
<div style = "display: flex; justify-content: flex-end">
<button>Click me!</button>
</div>
Solution 7 - Html
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)
Solution 8 - Html
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>
Solution 9 - Html
Another possibility is to use an absolute positioning oriented to the right. You can do it this way:
style="position: absolute; right: 0;"
Solution 10 - Html
In my case the
<p align="right"/>
worked fine