Last Updated on July 29, 2022 by Roshan Parihar
In this tutorial, learn how CSS align button to the right, left, and center position. The short answer is: use the CSS text-align property. To use the property, you need to place the button inside the <div> element.
Let’s find out different ways of button alignment using CSS with the simple live examples given below.
Left, Right, and Center Align Button Using CSS Text Align Property
To align the button to the left position, you have to use the CSS text-align property with left as its value and place the button inside the <div> element. In addition to this, if you want to align the button in the right position, you can also use the same property and right as its value as given below:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<style> .btn-text-left{ text-align: left; } .btn-text-right{ text-align: right; } </style> <div class="btn-text-left"> <button type="button" class="btn btn-primary">Left Align Button</button> </div> <div class="btn-text-right"> <button type="button" class="btn btn-primary">Right Align Button</button> </div> |
Output
Probably, you may also like to adjust the button to the center position. The CSS text-align property can also be used to set the button to the center position. You have to use center as the property value and place the button inside the <div> element to move the button to the center position.
|
1 2 3 4 5 6 7 8 |
<style> .btn-text-center{ text-align: center; } </style> <div class="btn-text-center"> <button type="button" class="btn btn-primary">Center Align Button</button> </div> |
Output
How to Left and Right Align Button Using CSS Float Property
In addition to the above, you can also use the CSS float property for button alignment. It can be used to move the button to the left and right positions.
To move the button to the left position, you have to use the CSS float property with left as its value. For the right position, you have to use this property with right as its value.
|
1 2 3 4 5 6 7 8 9 10 |
<style> .btn-float-left{ float: left; } .btn-float-right{ float: right; } </style> <button type="button" class="btn-float-left">Left Float Button</button> <button type="button" class="btn-float-right">Right Float Button</button> |
Output
The most noteworthy thing here is that you cannot use this property to center align the button. The above example showing the left and right align buttons.
Which CSS Property is Best for Button Alignment?
Out of the above examples, I recommend using the CSS text-align property for button alignment.
Because the CSS float property can create problems and make your buttons overlap with other elements. This may break your page and you never want this to happen with your design.
So, always prefer to use the CSS text-align property to align buttons to the required positions.
FAQS on How CSS Button Align Right, Left, and Center Position
Q1. How do You Align Button to the Right?
Answer: First of all, place the button inside the <div> element. After that, to align button to the right side, you have to use the CSS text-align property to the <div> element. Also, pass value right to this property for right alignment.
Q2. How do You Align Buttons?
Answer: You can easily align buttons using CSS property text-align. You have to first place your button inside the <div> element. Now, apply the CSS property text-align to the button to the <div> element. Now, pass the CSS property value right for right alignment, left for left alignment, and center for center alignment.