Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to align flexbox container into center using JavaScript?
To align a flexbox container into the center using JavaScript, we first need to select the container using a DOM manipulation method such as querySelector. Next, we need to set the container's CSS properties to "display: flex" and "justify-content: center". This will align the items within the container to the center horizontally.
Flexbox is a layout mode in CSS3 that lets you align and distribute elements on a page. It can be used for things like creating a main navigation bar or laying out a photo gallery. Flexbox is a powerful tool that can make your web layouts more flexible and responsive.
Approach
There are several ways to center a flexbox container using JavaScript −
The most common approach is to set the margin-left and margin-right properties to ‘auto’. This will cause the flexbox container to be centered within its parent element.
Another approach is to set the width of the flexbox container to ‘100%’ and then set the ‘justify-content’ property to ‘center’. This will cause the flexbox container to be centered within its parent element.
The code below will center a flexbox container using JavaScript. The container must have a defined width, and the flex-direction must be set to row.
First, we get the element with the ID of “container” −
var container = document.getElementById("container");
Then, we set the container’s style.flexDirection to “row” −
container.style.flexDirection = "row";
Finally, we set the container’s style.justifyContent to “center” −
container.style.justifyContent = "center";
Example
<!DOCTYPE html>
<html>
<head>
<title>Align Flexbox Container</title>
</head>
<body>
<div id='container'>
<div style="color: black;">I will be centered</div>
</div>
<script>
var container = document.getElementById("container");
container.style.display ='flex';
container.style.flexDirection = 'row';
container.style.justifyContent = 'center';
</script>
</body>
</html>
2K+ Views
