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>.

1

10 Answers

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

<input type="button" value="Click Me">

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></div> at the bottom of the container.

For example:

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).

0

If the button is the only element on the block:

.border { border: 2px blue dashed;
}
.mr-0 { margin-right: 0;
}
.ml-auto { margin-left:auto;
}
.d-block { display:block;
}

<p> <input type="button" value="The Button">
</p>

If there are other elements on the block:

.border { border: 2px indigo dashed;
}
.d-table { display:table;
}
.d-table-cell { display:table-cell;
}
.w-100 { width: 100%;
}
.tar { text-align: right;
}

<div> <p>The paragraph.....lorem ipsum...etc.</p> <div> <button >The Button</button> </div>
</div>

With flex-box:

.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>
<p>Once upon a time in a ...</p>
<button>Read More...</button>
</div>
<h1>Only Button</h1>
<div> <button>The Button</button>
</div>
<h1>Multiple Buttons</h1>
<div> <button>Button 1</button> <button>Button 2</button>
</div>

Good Luck...

4

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

<input type="button" value="Click Me">

Here's an example:

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

1

a modern approach in 2019 using flex-box

with div tag

<div> <input type="button" value="Click Me"/>
</div>

with span tag

<span> <input type="button" value="Click Me"/>
</span>

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

Try <a>Call to Action</a>. This way you don't need extra markup or rules to clear out floated elements.

1

<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>

1

To keep the button in the page flow:

<input type="button" value="Click Me" />

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

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> <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> <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>

0

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

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

1

In my case the

<p align="right"/>

worked fine

1

Your Answer

Sign up or log in

Sign up using Google Sign up using Facebook Sign up using Email and Password Submit

Post as a guest

Post Your Answer Discard

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy