How to align flexbox container into center using JavaScript ?
Last Updated :
12 Jan, 2023
In this article, we will set the alignment of content using JavaScript. The DOM Style alignContent property is used to align the items of a flexible container when they do not use all available space on the cross-axis.
Syntax:
object.style.alignContent = "center"
Property Value:
- center: It is used to place the text content into the center of the container.
Example: This example uses the alignContent property value as the center to align items to center of the box.
HTML
<!DOCTYPE html>
<html>
<head>
<title>
How to align flexbox container
into center using JavaScript?
</title>
</head>
<body>
<center>
<h1 style="color: green">
GeeksforGeeks
</h1>
<h3>
How to align flexbox container
into center using JavaScript?
</h3>
<p>
Click on button to change the
alignContent to "center"
</p>
<div class="main">
<div style="background-color:green;">
Geeks
</div>
<div style="background-color:lightgreen;">
For
</div>
<div style="background-color:green;">
Geeks
</div>
</div>
<button onclick="changeAlign()">
Change alignContent
</button>
</center>
</body>
</html>
|
CSS
.main {
width: 250px;
height: 300px;
border: 1px solid;
display: flex;
flex-flow: row wrap;
}
.main div {
width: 250px;
height: 70px;
font-size: 2rem;
text-align: center;
}
|
Javascript
function changeAlign() {
document.querySelector('.main')
.style.alignContent = "center";
}
|
Output: Click here to check the live output.
Share your thoughts in the comments
Please Login to comment...