How to align flexbox container into center using JavaScript ?

0 0 1 minute read

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"> 
            zambiatek 
        </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, zambiatek 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!