Align a flex item in the center horizontally, even when neighboring items are different sizes

Question

Align a flex item in the center horizontally, even when neighboring items are different sizes

In a section element, I have 3 divs inside, and I am trying to horizontally center 'div 2'. The issue I am facing is that the adjacent divs are not the same size, so using "justify-content:center" is not effective.

I came across a solution here (under the title "Center a flex item when adjacent items vary in size"), but unfortunately, it does not work for my case.

Below is the relevant code snippet:

HTML

<section>
  <div id="div1">DIV 1</div>
  <div id="div2">DIV 2</div>
  <div id="div3">DIV 3</div>
</section>

CSS

section{
  display:flex;   
  position:relative;      
}   
#div1{          
  width:260px; 
}
#div2{    
  position:absolute;  
  left:50%;
  transform(translateX:-50%,0);  
}
#div3{    
  margin-left:auto;
  width:50px;
}

Also, you can find a demonstration on codepen.

The main objective here is to center 'div2' and align the other divs to the left and right edges, respectively.

Any assistance on this matter would be greatly appreciated.

html css flexbox

Answer 1

Answer №1

  <article>   
    <div id="container1">Container 1</div>
    <div id="container2_wrap">
      <div id="container2">Container 2</div>
    </div>
    <div id="container3">Container 3</div>
  </article>



 article{
   display: flex;
   position:relative; 
   padding:5px;
   height: 500px;
   background:yellow;
 }
 div{
   padding:5px; 
   background:coral;
 }
 #container1{         
   width:260px; 
 }
 #container2_wrap{  
   position: absolute;
   left:50%;
   height: 100%;
   align-items: center;
   display: flex;
 }
 #container2 {
   background-color: #000fff;
 }
 #container3{    
   margin-left:auto;
   width:50px;
 }

Answer 2

  <article>   
    <div id="container1">Container 1</div>
    <div id="container2_wrap">
      <div id="container2">Container 2</div>
    </div>
    <div id="container3">Container 3</div>
  </article>



 article{
   display: flex;
   position:relative; 
   padding:5px;
   height: 500px;
   background:yellow;
 }
 div{
   padding:5px; 
   background:coral;
 }
 #container1{         
   width:260px; 
 }
 #container2_wrap{  
   position: absolute;
   left:50%;
   height: 100%;
   align-items: center;
   display: flex;
 }
 #container2 {
   background-color: #000fff;
 }
 #container3{    
   margin-left:auto;
   width:50px;
 }

Answer 3

Answer №2

To create equal width divs wrapped in another parent div, you can align the children divs inside their parent using the following method:

HTML:

<section>
  <div class="wrapper" id="div1">
    <div class="innerDiv">DIV 1</div>
  </div>
  <div class="wrapper" id="div2">
    <div class="innerDiv">DIV 2</div>
  </div>
  <div class="wrapper" id="div3">
    <div class="innerDiv">DIV 3</div>
  </div>
</section>

CSS:

section{
  display:flex;
  padding:5px;
  background:yellow;
  text-align:center;
}
.wrapper{
  display:flex;
  flex-grow:1;
  flex-wrap:wrap;
}
.innerDiv{
  padding:5px; 
  background:coral;
}
#div1{
  justify-content:flex-start;
}
#div1 .innerDiv{
  flex:1;
}

#div2{
  justify-content:center;
}
#div3{
  justify-content:flex-end;
}
#div3 .innerDiv{
  width:50px;
}

Check out the Codepen demo here

Alternatively, you can opt for a more traditional approach for better browser compatibility while keeping your HTML structure the same.

section {
  padding: 5px;
  background: yellow;
  text-align: center;
  position: relative;
  float: left;
  box-sizing: border-box;
  width: 100%;
}

div {
  padding: 5px;
  display: inline-block;
  background: coral;
}

#div1 {
  width: 260px;
  float: left;
}

#div2 {
  left: 50%;
  margin-left: -0.5em;
  position: absolute;
}

#div3 {
  float: right;
  width: 50px;
}

View the Codepen demo here

Answer 4

To create equal width divs wrapped in another parent div, you can align the children divs inside their parent using the following method:

HTML:

<section>
  <div class="wrapper" id="div1">
    <div class="innerDiv">DIV 1</div>
  </div>
  <div class="wrapper" id="div2">
    <div class="innerDiv">DIV 2</div>
  </div>
  <div class="wrapper" id="div3">
    <div class="innerDiv">DIV 3</div>
  </div>
</section>

CSS:

section{
  display:flex;
  padding:5px;
  background:yellow;
  text-align:center;
}
.wrapper{
  display:flex;
  flex-grow:1;
  flex-wrap:wrap;
}
.innerDiv{
  padding:5px; 
  background:coral;
}
#div1{
  justify-content:flex-start;
}
#div1 .innerDiv{
  flex:1;
}

#div2{
  justify-content:center;
}
#div3{
  justify-content:flex-end;
}
#div3 .innerDiv{
  width:50px;
}

Check out the Codepen demo here

Alternatively, you can opt for a more traditional approach for better browser compatibility while keeping your HTML structure the same.

section {
  padding: 5px;
  background: yellow;
  text-align: center;
  position: relative;
  float: left;
  box-sizing: border-box;
  width: 100%;
}

div {
  padding: 5px;
  display: inline-block;
  background: coral;
}

#div1 {
  width: 260px;
  float: left;
}

#div2 {
  left: 50%;
  margin-left: -0.5em;
  position: absolute;
}

#div3 {
  float: right;
  width: 50px;
}

View the Codepen demo here

Align a flex item in the center horizontally, even when neighboring items are different sizes

Answer №1

Answer №2

Similar questions

How can I fix my HTML Image input not redirecting when clicked?

Using mix-blend-mode with an SVG image within a colored <div>: tips for applying it to the background color of your HTML

Creating a single Vuetify expansion panel: A step-by-step guide

Having difficulty changing the value of a Select element in AngularJS

Various background positions

What is the best way to make sure the embedded object fills the entire height of the container div?

AngularJS: Default value causes dropdown menu text to not display

Mobile Image Gallery by Adobe Edge

Tips for creating a clickable popover within a window that remains open but can be closed with an outside click

Using the DRY principle in JavaScript to handle dynamic fields

Footer refuses to stay anchored at the bottom of the page

Displaying feedback messages and redirecting in Flask may result in the response being visible in the developer tools, but

The custom bullet points are not appearing correctly

What are some techniques for disguising text on a website to give the illusion of being in English but is actually impossible to read

Carousel with Bootstrap: Heading positioned over the content

Close the ionicPopup by tapping anywhere

Can the hexadecimal value from an input type color be extracted and used to populate form fields that will then be displayed in a table after submission?

Adjusting the width of innerHtml within a React router link to match the parent element's width

Transferring data from an Excel spreadsheet into a structured table

Switch up the display of table rows with a convenient Toggle Button located right after the