How to align flexbox container into center using JavaScript ?
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 center of the container.
Example:
HTML
<!DOCTYPE html> <html> <head> <title> How to align flexbox container into center using JavaScript? </title> </head> <head> <style> .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; } </style> </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> <script> function changeAlign() { document.querySelector('.main') .style.alignContent = "center"; } </script> </body> </html> |
chevron_right
filter_none
Output:
Before Click the Button:
After Click the Button:
