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!
