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"> neveropen </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.
Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, neveropen Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!
… [Trackback]
[…] Read More here to that Topic: geeksforgeeks.org/how-to-align-flexbox-container-into-center-using-javascript/ […]
… [Trackback]
[…] There you will find 8511 more Information on that Topic: geeksforgeeks.org/how-to-align-flexbox-container-into-center-using-javascript/ […]