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 > |
Output:
Before Click the Button:
After Click the Button: