Question 43929 in Html Question posted in
Some basic documentation can be found here.

apply justify content based on center of divs – Html

How can I apply justify-content: space-between based on the center of divs? For example let’s assume I have three divs of different sizes. I want to make them justify in a way that the second div’s center is at the center of its container

.flex {
  display: flex;
  width: 1000px;
  height: 200px;
  background-color: black;
  justify-content: space-between;
  position: relative;
}

.first {
  width: 150px;
  background-color: red;
}

.second {
  width: 200px;
  background-color: green;
}

.third {
  width: 100px;
  background-color: blue;
}

.center {
  width: 10px;
  height: 10px;
  background-color: white;
  position: absolute;
  top: calc(50% - 5px);
  left: calc(50% - 5px);
}
<div class="flex">
  <div class="center"></div>
  <div class="first"></div>
  <div class="second"></div>
  <div class="third"></div>
</div>

enter image description here
As you can see, it is not centered. Or in case of four divs, I want the center of container div to be in the middle of second and third divs. Is there a built in way to achieve this behavior? Thanks in advance

Tags:

3

Answers


  1. 0

    Make use of

    .flex {
  display: flex;
  width: 100%;
  height: 200px;
  background-color: black;
  justify-content: space-between;
  position: relative;
}

    You don’t need <div class="center"></div>

    Login or Signup to reply.
  2. 0

    I can’t think of any way to do this using only a flexbox with the different-sized elements as direct children, if you need support for an arbitrary number of elements. My recommendation would be to use a flexbox with an extra layer of child elements. Or you could use a table, but I think the flexbox is cleaner.

    .wrapper{
  display: flex;
  height: 100px;
  width: 500px;
  position: relative;
  
}

.center{
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0px;
  border: 2px solid black;
  transform: translateX(-50%);
  
}

.item{
  flex: 1;
  border: 1px solid black;
}

.narrowContent{
  width: 50%;
  height: 100%;
  background-color: red;
  margin: 0px auto;
}

.content{
  width: 100%;
  height: 100%;
  background-color: green;
}


.mytable{
  display: table;
  height: 100px;
  width: 500px;
  position: relative;
}

.myrow{
  display: table-row;
}

.mycell{
  display: table-cell;
  border: 1px solid black;
  height: 100%;
}
    Flex:
<div class="wrapper">
  <div class="center">

  </div>
  <div class="item">
    <div class="narrowContent">

    </div>
  </div>
  <div class="item">
    <div class="content">

    </div>
  </div>
  <div class="item">
    <div class="content">

    </div>
  </div>
  <div class="item">
    <div class="narrowContent">

    </div>
  </div>
  <div class="item">
    <div class="content">

    </div>
  </div>
</div>


Table:
<div class="mytable">
  <div class="center">

  </div>
  <div class="myrow">
    <div class="mycell">
      <div class="narrowContent">

      </div>
    </div>
    <div class="mycell">
      <div class="narrowContent">

      </div>
    </div>
    <div class="mycell">
      <div class="content">

      </div>
    </div>
    <div class="mycell">
      <div class="content">

      </div>
    </div>
    <div class="mycell">
      <div class="narrowContent">

      </div>
    </div>
    <div class="mycell">
      <div class="content">

      </div>
    </div>
  </div>
</div>
    Login or Signup to reply.
  3. 0

    I could come this kind of approch. We can get number of child element and find the middle element and create your center DIV inside there

    <div>
   <div></div>
   <div> <div class="center"> </div></div> <----Added new center div element inside here
   <div></div>
</div>

    or

    if dont have an one middle element we can add the center DIV between two middle element

    <div>
   <div></div>
   <div></div> <--------------Added new center div element here
   <div></div>
</div>

    function findMiddle(){

  //get all the child elements
  var childsEl = document.getElementById('parent').children;
  
  //get the parant element referance
  var parent = document.getElementById('parent');
  
  //find the middle index from parent child element
  var middle = (childsEl.length - 1) / 2;

  //Create the center div element
  var centerElement = document.createElement("div");

  //use regex to check the sigle middle div element is avaibale or not
  let regexPattern = /^-?[0-9]+$/;
  let res = regexPattern.test(middle);
  
  //Depending on the middle element availability
  if(res){

    //Add new class to center element (deside W/H background color)
    centerElement.classList.add("centerItem")
    
    //add class to parent element of the center element  
    //and make it as flex and make it vertically any horizontally center
    //in the parent div
    childsEl[middle].classList.add('centerChild')
    
    //apend the new center element inside the middle element (now it 
    //parent of center element)
    childsEl[middle].appendChild(centerElement);
  }else{
  
    //here posistion has set as relative
    centerElement.classList.add("centerItem")

    //move the ceneter element down to show as center of the container
    //If you use same div height instead of make this element center 
    //from it parent. you can get the height of the one child element
    //make half as top: ???
    centerElement.style.top = parent.scrollHeight / 2 + "px";

    //create a new alement between two divs if we dont have middle div 
    //element
    parent.insertBefore(centerElement, childsEl[Math.round(middle)]);
  
  
  }
  
}
findMiddle()
    .flex {
  display: flex;
  width: 1000px;
  height: 200px;
  background-color: black;
  justify-content: space-between;
}

.first {
  width: 150px;
  background-color: red;
}

.second {
  width: 200px;
  background-color: green;
}

.third {
  width: 100px;
  background-color: blue;
}

.centerItem {
  width: 10px;
  height: 10px;
  background-color: white;
  position: relative;
  
  /* position: absolute;
  left: 50%;
  transform: translateX(-50%) */
}

.centerChild{
  display: flex;
  justify-content: center;
  align-items: center;
}
    <div class="flex" id="parent">
  <div class="first"></div>
  <div class="second"></div>
  <div class="third"></div>
</div>

    Add any number of DIV element and see

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search