Button Alignment in HTML

Just knowing how to create a button in HTML is not enough, You need to know where to place that button where you want it. So, it’s okay if you do not know the button alignment in HTML, You have come to the right place to know it. In this article, I will explain to you a clear example of how to align a button in CSS.

Table of Contents

How to align buttons on a div element in HTML

HTML:

<html>
<head>
<title>Button Alignment in HTML</title>
<body>
<div class="main">
<button class="top-left">TOP-LEFT BUTTON</button>
<button class="top-center">TOP-CENTER BUTTON</button>
<button class="top-right">TOP-RIGHT BUTTON</button>
<button class="center-left">CENTER-LEFT BUTTON</button>
<button class="center-center">CENTER-CENTER BUTTON</button>
<button class="center-right">CENTER-RIGHT BUTTON</button>
<button class="bottom-left">BOTTOM-LEFT BUTTON</button>
<button class="bottom-center">BOTTOM-CENTER BUTTON</button>
<button class="bottom-right">BOTTOM-RIGHT BUTTON</button>
</div>
</body>
</html>

CSS:

.main {
height: 200px;
position: relative;
border: 3px solid black; }

button{
position: absolute;
font-weight: bold;
width: 25%;
height: 15%;}

.top-left {
top: 0%;
left: 0%; }

.top-center{
top: 0%;
left: 50%;
transform: translate(-50%); }

.top-right{
top: 0%;
right: 0%; }

.center-left{
top: 50%;
transform: translateY(-50%); }

.center-center{
top: 50%;
left: 50%;
transform: translate(-50%, -50%); }

.center-right{
right: 0%;
bottom: 45%; }

.bottom-left{
bottom: 0%;
left: 0%; }

.bottom-center{
bottom: 0%;
left: 50%;
transform: translate(-50%); }

.bottom-right{
bottom: 0%;
right: 0%;
}

The output of this code will look like this:

In the HTML code above, I create a div element and then 9 buttons inside it, because to explain the all button alignment position to you. Then create each class for each button and I have the class name it separately as top-left, top-center, top-right, center-left, center-center, center-right, bottom-left, bottom-center, and bottom-right. Let us see how to align the button using CSS.

Before that, you must do this, in CSS add the “position” property with its “relative” value to the “main” class of the <div> element. And add the “position” property with its “absolute” value for the button element.

Top-left Button Alignment

If you want to align the button to the top left, Do this simple step in CSS

Add the “top” property with its “0%” value to the ” top-left” class of the <button> element.
Add the “left” property with its “0%” value to the ” top-left” class of the <button> element.

Top-center Button Align

If you want to align the button to the top center in a <div>, Do this simple step in CSS

Add the “top” property with its “0%” value to the ” top-center” class of the <button> element.
Add the “left” property with its “50%” value to the ” top-center” class of the <button> element.
And add “transform” with its “translate(-50%)” value to the ” top-center” class of the <button> element.

Top-right Button Align

If you want to align the button to the top right in a <div>, Do this simple step in CSS

Add the “top” property with its “0%” value to the ” top-right” class of the <button> element.
Add the “right” property with its “0%” value to the ” top-right” class of the <button> element.

Center-left Button Alignment

If you want to align the button to the center-left in a <div>, Do this simple step in CSS

Add the “top” property with its “50%” value to the ” center-left” class of the <button> element.
And add “transform” with its “translateY(-50%)” value to the “center-left” class of the <button> element.

Center-center Button Align

If you want to align the button to the center-center in a <div>, Do this simple step in CSS

Add the “top” property with its “50%” value to the ” center-center” class of the <button> element.
Add the “left” property with its “50%” value to the ” center-center” class of the <button> element.
And add “transform” with its “translate(-50%,-50%)” value to the “center-center” class of the <button> element.

Center-right Button Align

If you want to align the button to the center-right in a <div>, Do this simple step in CSS

Add the “top” property with its “50%” value to the ” center-right” class of the <button> element.
Add the “right” property with its “0%” value to the ” center-right” class of the <button> element.
And add “transform” with its “translate(0%,-50%)” value to the “center-right” class of the <button> element.

Bottom-left Button Alignment

If you want to align the button to the bottom left in a <div>, Do this simple step in CSS
Add the “bottom” property with its “0%” value to the ” top-left” class of the <button> element.
Add the “left” property with its “0%” value to the ” top-left” class of the <button> element.

Bottom-center Button Align

If you want to align the button to the bottom center in a <div>, Do this simple step in CSS

Add the “bottom” property with its “0%” value to the ” top-center” class of the <button> element.
Add the “left” property with its “50%” value to the ” top-center” class of the <button> element.
And add “transform” with its “translate(-50%)” value to the ” top-center” class of the <button> element.

Bottom-right Button Alignment

If you want to align the button to the bottom right in a <div>, Do this simple step in CSS

Add the “bottom” property with its “0%” value to the ” top-right” class of the <button> element.
Add the “right” property with its “0%” value to the ” top-right” class of the <button> element.

Align Two Button line by line

<html>
<head>
	<title>line by line button align</title>
</head>
<style type="text/css">
	button{
		display: block; }
</style>
<body>
<div>
	<button>Button1</button>
    <button>Button2</button>
</div>
</body>
</html>

Conclusion

I hope this article helps you in some way, And if in any doubt ask in the comment section.