Issue
How to center child div dynamically by using class "center". I can't find any reference, and don't know what should I search.
Someone knows how to do it either in css or tailwind way?
Here are the example output in image below. (in snippet below color black was centered)
.parent {
height: 500px;
width: 300px;
border: 1px solid black;
overflow-y: hidden;
}
.child {
height: 100px;
}
.orange { background: orange; }
.yellow { background: yellow; }
.black { background: black; }
.green { background: green; }
.gray { background: gray; }
.violet { background: violet; }<div class="parent">
<div class="child orange"></div>
<div class="child yellow"></div>
<div class="child black"></div>
<div class="child green center"></div>
<div class="child gray"></div>
<div class="child violet"></div>
</div>Here is my also codepen
Solution
There might be a way to center the divs dynamically using CSS frameworks.
But here is my Javascript solution to this problem:
Note: I have removed the height from parent div as the height is fixed in the child divs.
- First we need to select the parent element
let parent = document.querySelector("#parent");
- Calculate total number of child
let totalChild = parent.childElementCount;
- Find middle position
const middle = Math.floor(totalChild / 2);
- Select the div with class center
let centerDiv = document.querySelector("#parent .center");
- Delete the center div
parent.removeChild(centerDiv);
- Insert the center div to the middle position of parent
parent.insertBefore(centerDiv, parent.children[middle]);
Here is the code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style>
#parent {
width: 300px;
border: 1px solid black;
overflow-y: hidden;
}
.child {
height: 100px;
}
.orange {background: orange;}
.yellow {background: yellow;}
.black {background: black;}
.green {background: green;}
.gray {background: gray;}
.violet {background: violet;}
</style>
</head>
<body>
<div id="parent">
<div class="child orange"></div>
<div class="child yellow"></div>
<div class="child black"></div>
<div class="child green"></div>
<div class="child gray"></div>
<div class="child violet center"></div>
</div>
<script>
// STEP 1: select parent div
let parent = document.querySelector("#parent");
// STEP 2: calculate total number of child
let totalChild = parent.childElementCount;
// STEP 3: find middle position
const middle = Math.floor(totalChild / 2);
// STEP 4: Select the div with class center
let centerDiv = document.querySelector("#parent .center");
// STEP 5: Delete the center div
parent.removeChild(centerDiv);
// STEP 6: Insert the center div to the middle position of parent
parent.insertBefore(centerDiv, parent.children[middle]);
</script>
</body>
</html>
If there are 5 (odd) elements in the parent div:
Index 2 will be the middle element
If there are 6 (even) elements in the parent div:
Index 3 will be the middle element
If you want index 2 when there are 6 (even) elements, you can subtract 1 from totalCount in step 2.
let totalChild = parent.childElementCount - 1;
UPDATE:
Since you wanted to display the div centered based on the height of the parent div, you can try this:
In this code, middle position is calculated by dividing Parent div height by child div height.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style>
#parent {
height: 500px;
width: 300px;
border: 1px solid black;
overflow-y: hidden;
}
.child {
height: 100px;
}
.orange {background: orange;}
.yellow {background: yellow;}
.black {background: black;}
.green {background: green;}
.gray {background: gray;}
</style>
</head>
<body>
<div id="parent">
<div class="child orange center"></div>
<div class="child yellow"></div>
<div class="child black"></div>
<div class="child green"></div>
<div class="child gray"></div>
</div>
<script>
// STEP 1: select parent and child div
let parent = document.querySelector("#parent");
let child = document.querySelector(".child");
// STEP 2: calculate height of parent and child div
let parentHeight = parent.clientHeight;
let childHeight = child.clientHeight;
// STEP 3: Total number of blocks that needs to be there
const totalBlocks = Math.floor(parentHeight / childHeight);
// STEP 4: Find the middle block
const middle = Math.floor(totalBlocks / 2);
// STEP 5: Select the div with class center
let centerDiv = document.querySelector("#parent .center");
// STEP 6: Delete the center div
parent.removeChild(centerDiv);
// STEP 7: Insert the center div to the middle position of parents height
parent.insertBefore(centerDiv, parent.children[middle]);
</script>
</body>
</html>
UPDATE: Looking at the images you have posted, what you can do is find the difference between the div that needs to be centered and the position of the middle block of the parent like this:
After finding the difference, you can offset all the child divs. To select all the child elements, I have used a container div as a wrapper for all the child divs.
- Added
position: relative;to parent id so that child can calculate the offset value relative to the parent.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style>
#parent {
height: 500px;
width: 300px;
border: 1px solid black;
overflow-y: hidden;
position: relative;
}
.child {
height: 100px;
}
.orange {background: orange;}
.yellow {background: yellow;}
.black {background: black;}
.green {background: green;}
.gray {background: gray;}
</style>
</head>
<body>
<div id="parent">
<div id="container">
<div class="child orange"></div>
<div class="child yellow"></div>
<div class="child black"></div>
<div class="child green center"></div>
<div class="child gray"></div>
</div>
</div>
<script>
// Select parent, child container and child div
let parent = document.querySelector("#parent");
let child = document.querySelector(".child");
let childContainer = document.querySelector("#container");
// STEP 1: find the middle position of block in the parent div
let parentHeight = parent.clientHeight;
let childHeight = child.clientHeight;
let totalBlocks = Math.floor(parentHeight / childHeight); // 5
let middleBlock = Math.floor(totalBlocks / 2); // 2
let middlePosition = middleBlock * childHeight; // 200px
// STEP 2: Find the position of div that needs to be in the center.
let centerDivPosition = document.querySelector(".center").offsetTop; // 300px
// Step 3: find the difference between them
let offestValue = middlePosition - centerDivPosition; // -100
// Step 4: offset the container position
childContainer.style.position = "relative";
childContainer.style.top = `${offestValue}px`;
</script>
</body>
</html>
Answered By - mrsagar105
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.