How do you center the second div inside a flex box if the divs around it have different width?

Asked Feb 17 '22 at 20:04

Active Feb 17 '22 at 20:27

Viewed 271 times

This is my html

<div id="container">
  <div class="first"></div>
  <div class="middle"></div>
  <div></div>
</div>

This is my css:

#container {
  display: flex;
  justify-content: space-between;
  background-color: lightyellow;
}

#container > div {
  width: 100px;
  height: 100px;
  border: 2px dashed red;
}

#container > div.first {
  width: 300px;
}

I have a situation where I have a flexbox and the divs inside of it don't have the same width. So I am wondering how to ignore the width of the two divs and place the middle div right in the middle. Is this possible?

asked Feb 17 '22 at 20:04

Sayaman

1,145
4
14
35

It doesn't because they're span with text elements. – Sayaman Feb 17 '22 at 20:25
As flex items the `span` vs `div` is irrelevant. – Chris W. Feb 17 '22 at 20:27
You can create another level of divs for flex items of same width and put variable with divs inside them. – Farhad Zare Feb 17 '22 at 20:33

How do you center the second div inside a flex box if the divs around it have different width?

0 Answers0