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 : 2 rem;
text-align : center ;
}
|
Javascript
function changeAlign() {
document.querySelector( '.main' )
.style.alignContent = "center" ;
}
|
Output: Click here to check the live output.