Last Updated on December 25, 2024 by Roshan Parihar
In this tutorial, learn how to align button to the right, left, and center position using CSS. 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.
How to Align Button to Left, Right, and Center Using CSS
You can easily position the button to left, right, and center position using CSS with the different ways as given here.
Left Align Button Using CSS text-align Property
Firstly, place the button inside the <div> element. After that, use the CSS text-align: left property as given below:
|
1 2 3 4 5 6 7 8 |
<style> .btn-text-left{ text-align: left; } </style> <div class="btn-text-left"> <button type="button">Left Align Button</button> </div> |
Output
Right Align Button Using CSS text-align Property
To right align button in CSS, you have to first place the button inside the <div> element. After that, use the CSS text-align: right property as given below:
|
1 2 3 4 5 6 7 8 |
<style> .btn-text-right{ text-align: right; } </style> <div class="btn-text-right"> <button type="button">Right Align Button</button> </div> |
Output
Center Alignment of Button in CSS
For center aligment of button, you have to place the button inside <div> element and use the CSS text-align: center property as given below:
|
1 2 3 4 5 6 7 8 |
<style> .btn-text-center{ text-align: center; } </style> <div class="btn-text-center"> <button type="button">Center Align Button</button> </div> |
Output
Left and Right Button Alignment on the Same Line Using CSS Float Property
If you want to align the buttons to the left and right position on the same line, you can use the CSS float property.
To move the button to the left position on the same line, you have to use the CSS float: left property. For the right position, you have to use this property as float: right.
|
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.