Open In App
Related Articles

How to align flexbox container into center using JavaScript ?

Improve Article
Improve
Save Article
Save
Like Article
Like

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: 2rem;
    text-align: center;
}

Javascript




function changeAlign() {
    document.querySelector('.main')
        .style.alignContent = "center";

Output: Click here to check the live output.

 


Last Updated : 12 Jan, 2023
Like Article
Save Article
Similar Reads
Related Tutorials