Question 46000 in CSS Question posted in
Some basic documentation can be found here.

Can't align items with static px width inside a flex container – CSS

That’s interesting, why I can’t align items with static px width inside a flex container. If I don’t give the child blocks the static width of 100 % they are centered in the center of the parent . But when I’m using the width of 100ps the child blocks are moved to the start position.

.wrapper {
 display: flex;
 justify-content: space-around;
}
.item {
  width: 20%;
}
.item__inner {
  width: 100px;   /* Beacuse of the static width I can't align the inner items inside the item wrapper .item*/
  height: 100px;
  border-radius: 50%;
  background: red;
}
<div class="wrapper">
  <div class="item">
    <div class="item__inner">
    </div>
  </div>
  <div class="item">
  </div>
</div>
Tags:

2

Answers


  1. 0

    Well if the case is to align div with class item__inner to the center, you just need to add margin auto: like this:

    .wrapper {
 display: flex;
 justify-content: space-around;
}
.item {
  width: 20%;
  background-color: orange;
}
.item__inner {
  margin: 0 auto;
  width: 100px;   /* Beacuse of the static width I can't align the inner items inside the item wrapper .item */
  height: 100px;
  border-radius: 50%;
  background: red;
}
    Login or Signup to reply.
  2. 0

    To center item__inner inside .item, can add the following to .item:

    .item {
  width: 30%;
  display: flex;
  justify-content: center;
}

    I also changed the width from 20% to 30%, because otherwise there’s not enough space for the circle.

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

Back To Top
Search