CSS is primarily utilized for enhancing the visual appearance of an HTML webpage. By employing CSS, we are able to define the layout of elements within the page.
There are various methods of aligning the button at the center of the web page. We can align the buttons horizontally as well as vertically. We can center the button by using the following methods:
- text-align: center - By setting the value of text-align property of parent div tag to the center.
- margin: auto - By setting the value of margin property to auto.
- display: flex - By setting the value of display property to flex and the value of justify-content property to center .
- display: grid - By setting the value of display property to the grid.
Let's grasp the aforementioned techniques through the utilization of visual aids.
Example
In this instance, we are employing the text-align property and configuring it to center alignment. This can be situated within a body tag or within the parent div tag of the respective element.
Here, we apply the text-align: center; property to the parent div container of the button component.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Center align button</title>
<style>
.container{
text-align: center;
border: 7px solid red;
width: 300px;
height: 200px;
padding-top: 100px;
}
#btn{
font-size: 25px;
}
</style>
</head>
<body>
<div class="container">
<button id ="btn"> Click me </button>
</div>
</body>
</html>
Output
Example
In this instance, we are employing the display: grid; attribute and margin: auto; attribute. In this scenario, the display: grid; is placed within the parent div container of the button element.
The button will be positioned at the center both horizontally and vertically.
<!DOCTYPE html>
<html>
<head>
<title>Center align button</title>
<style>
.container {
width: 300px;
height: 300px;
border: 5px solid red;
display: grid;
}
button {
background-color: lightblue;
color: black;
font-size: 25px;
margin: auto;
}
p{
font-size: 25px;
}
</style>
</head>
<body>
<div class="container">
<button> Click me </button>
</div>
<p>In this example we are using the <b> display: grid; </b> and <b> margin: auto;</b> properties</p>
</body>
</html>
Output
Example
It's yet another instance of centering a button. Here, we demonstrate centering using the properties display: flex;, justify-content: center;, and align-items: center;.
This demonstration will assist us in centering the button both horizontally and vertically.
<!DOCTYPE html>
<html>
<head>
<title>Center align button</title>
<style>
.container {
width: 300px;
height: 300px;
border: 5px solid red;
display: flex;
justify-content: center;
align-items: center;
}
button {
background-color: lightblue;
color: black;
font-size: 25px;
}
</style>
</head>
<body>
<div class="container">
<button> Click me </button>
</div>
</body>
</html>
Output