In this tutorial we will show you the solution of button alignment in HTML, button are mainly used to submit something, and for redirection.
In previous sessions, we already discussed about how to create a button in html or about button redirection.
In this article we will discuss about alignment of button. Let us understand
Step By Step Guide On Button Alignment In HTML :-
As here, today we are going to discuss about alignment of buttons in html. There are various ways with the help of which you are able to align buttons in html.
Here, below we are going to show you a simple code in html in which we show you different alignment of button. Let’s see the codes given below.
<!DOCTYPE html>
<html>
<head>
<title> Title of the document</title>
<style>
.main_disp {
margin-top: 50px;
height: 200px;
position: relative;
border: 2px solid rgb(230, 255, 8);
width: 1020px;
height: 300px;
}
.center {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.top_left {
margin: 0;
position: absolute;
top: 0%;
left: 0%;
}
.top_right {
margin: 0;
position: absolute;
top: 0%;
right: 0%;
}
.bottom_right {
margin: 0;
position: absolute;
bottom: 0%;
right: 0%;
}
.bottom_left {
margin: 0;
position: absolute;
bottom: 0%;
left: 0%;
}
</style>
</head>
<body style="margin: 0;">
<div class="main_disp">
<div class="button">
<button class="top_left">top left Button</button>
<button class="top_right">top right Button</button>
<button class="center">Centered Button</button>
<button class="bottom_left">bottom left Button</button>
<button class="bottom_right">bottom right Button</button>
</div>
</div>
</body>
</html>
- First, we write <! DOCTYPE html> which we used as an instruction to the web browser about what version of HTML file is written in.
- Secondly, the <html> tag is used to indicate the beginning of an HTML document.
- As above now <head> tag is used to contain information about web page. In this tag a <title> tag is used which helps us to specify a webpage title. Both <head> and <title> tags are Paired tags. So, both have </head> and </title> ending tags respectively.
- Thirdly, <body> tag is used to define the webpage body. All the contents to show on website are written here.
- Here, in body we create a main div with class main_disp and inside this we create another div with class button.
- In this div we done our task. Under this we create five similer buttons with different classes and text inside this. And here our body ends.
- Now, let us talk about its style. In style we give CSS to all button the main property used here is of position which is absolute.
- And after this we give top/bottom and left/right according to positions where we want to align buttons. We hope that you understand the codes properly.
- At last, the <body> and <html> tags are closed with </body> and </html> respectively.
Conclusion :-
At last here in conclusion, we can say that with the help of this article we are able to align button in html. I hope this tutorial on button alignment in HTML helps you.
About Pragati
