Place a button right aligned

Question

I use this code to right align a button     x000D   x000D   lt p align  right  gt  x000D     lt input type  button  value  Click Me    gt  x000D   lt  p gt  x000D   x000D   x000D    But  lt p gt  tags wastes some space  so looking to do the same with  lt span gt  or  lt div gt

User · Answer

a modern approach in 2019 using flex-box  with div tag   x000D   x000D   lt div style  display flex  justify-content flex-end  width 100   padding 0   gt  x000D       lt input type  button  value  Click Me   gt  x000D   lt  div gt  x000D   x000D   x000D    with span tag   x000D   x000D   lt span style  display flex  justify-content flex-end  width 100   padding 0   gt  x000D       lt input type  button  value  Click Me   gt  x000D   lt  span gt  x000D   x000D   x000D

User · Answer

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   lt div style  text-align right  width 100   padding 0   gt       lt input type  button  value  Click Me   gt   lt  div gt    I have taken care to specify width 100  to be sure that  lt div gt  take full width of his container   I have also added padding 0 to avoid before and after space as with  lt p gt  element   I can say that if  lt div gt  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  -     lt div style  text-align right  width 100   padding 0   gt       lt input type  button  value  Click Me 1   gt       lt input type  button  value  Click Me 2   gt       lt input type  button  value  Click Me 3   gt       lt input type  button  value  Click Me 4   gt       lt input type  button  value  Click Me 5   gt       lt input type  button  value  Click Me 6   gt   lt  div gt

User · Answer

Which alignment technique you use depends on your circumstances but the basic one is float  right     lt input type  button  value  Click Me  style  float  right   gt    You ll probably want to clear your floats though but that can be done with overflow hidden on the parent container or an explicit  lt div style  clear  both   gt  lt  div gt  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

User · Answer

Another possibility is to use an absolute positioning oriented to the right  You can do it this way   style  position  absolute  right  0

User · Answer

x000D   x000D   lt div style    display  flex  justify-content flex-end  gt       lt button gt Click me  lt  button gt   lt  div gt  x000D   x000D   x000D    lt div style    quot display  flex  justify-content  flex-end quot  gt       lt button gt Click me  lt  button gt   lt  div gt

User · Answer

Another possibility is to use an absolute positioning oriented to the right    lt input type  button  value  Click Me  style  position  absolute  right  0   gt    Here s an example  https   jsfiddle net a2Ld1xse   This solution has its downsides  but there are use cases where it s very useful

User · Answer

This would solve it    lt input type  button  value  Text Here     style  float  right   gt    Good luck with your code

User · Answer

This solution depends on Bootstrap 3  as pointed out by  g  nther-jena  Try  lt a class  btn text-right  gt Call to Action lt  a gt   This way you don t need extra markup or rules to clear out floated elements

User · Answer

If the button is the only element on the block    x000D   x000D   border   x000D    border  2px blue dashed  x000D    x000D   x000D   mr-0   x000D    margin-right  0  x000D    x000D   ml-auto   x000D    margin-left auto  x000D    x000D   d-block   x000D    display block  x000D    x000D   lt p class  border  gt  x000D     lt input type  button  class  d-block mr-0 ml-auto  value  The Button  gt  x000D   lt  p gt  x000D   x000D   x000D    If there are other elements on the block    x000D   x000D   border   x000D    border  2px indigo dashed  x000D    x000D   x000D   d-table   x000D    display table  x000D    x000D   x000D   d-table-cell   x000D    display table-cell  x000D    x000D   x000D   w-100   x000D    width  100   x000D    x000D   x000D   tar   x000D    text-align  right  x000D    x000D   lt div class  border d-table w-100  gt  x000D     lt p class  d-table-cell  gt The paragraph     lorem ipsum   etc  lt  p gt  x000D     lt div class  d-table-cell tar  gt  x000D       lt button  gt The Button lt  button gt  x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   x000D    With flex-box    x000D   x000D   flex-box   x000D    display flex  x000D    justify-content space-between  x000D    outline  2px dashed blue  x000D    x000D   x000D   flex-box-2   x000D    display flex  x000D    justify-content  flex-end  x000D    outline  2px deeppink dashed  x000D    x000D   lt h1 gt Button with Text lt  h1 gt  x000D   lt div class  flex-box  gt  x000D   lt p gt Once upon a time in a     lt  p gt  x000D   lt button gt Read More    lt  button gt  x000D   lt  div gt  x000D   x000D   lt h1 gt Only Button lt  h1 gt  x000D   lt div class  flex-box-2  gt  x000D     lt button gt The Button lt  button gt  x000D   lt  div gt  x000D   x000D   lt h1 gt Multiple Buttons lt  h1 gt  x000D   lt div class  flex-box-2  gt  x000D     lt button gt Button 1 lt  button gt  x000D     lt button gt Button 2 lt  button gt  x000D   lt  div gt  x000D   x000D   x000D    Good Luck

User · Answer

To keep the button in the page flow    lt input type  button  value  Click Me  style  margin-left  auto  display  block     gt     put that style in a  css file  do not use this html inline  for better maintenance

User · Answer

In my case the    lt p align  right   gt    worked fine

[html] Place a button right aligned

Examples related to html

Examples related to css