How can i center 3 div inside a div with a space between-CodePudding

I would like to center all the content of the "box", then all the "items" in the "shop-box" with a space between them

HTML

 <div >
        <div >
          <div >
            <a href="#"><div ></div></a>
            <a href="#"><div ></div></a>
            <a href="#"><div ></div></a>
          </div>
        </div>
      </div>

CSS

.shop-container {
  height: auto;
  margin: 0 auto;
  padding: 10px;
  position: relative;
  margin-top: 30px;
  border: 5px solid red;
  width: 100%;
  height: 400px;
}

.shop-box {
  width: 95%;
  height: 83%;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border: 5px solid rgb(51, 255, 0);
}

.box {
  display: flex;
  position: absolute;
  width: 100%;
  margin: 5 5px;
}
.item {
  background: gray;
  width: 300px;
  height: 300px;
  margin: 0 5px;
}

screenshot of the problem: https://i.stack.imgur.com/uNM84.png

CodePudding user response：

You can do that by using a flexbox, which you already are (though with some problems).

On .shop-container you'll want either the width: 100%; or margin: 0 auto;. Both doesn't make sense (if it takes up the whole width, centering it becomes a meaningless act.

I'm not sure if you need the position: relative for some unrelated reason ? If not then i'd get rid of that.

The fact that you've wrapped the content (the 3 <a>s) within 3 layers of <div>s is generally a bad idea (again unless you have some unrelated reason to do so). I'd recommend simplifying it a lot, such as this:

.box {
display:         flex;
min-width:       fit-content;
flex-flow:       row nowrap;    /* = (horizontal) dont wrap if the items dont fit horizontally; alternatives: wrap | nowrap; */
margin:          0 auto;        /* = center the box, if it happens to be not as wide as its parent */
justify-content: center;        /* = (horizontal) center the <a>s ; try these alternatives: flex-start | flex-end | center | space-between | space-around | space-evenly */
align-items:     flex-start;    /* = (vertical)   align the <a>s to the top of this container (if they were to have different heights); possible alternatives: center | stretch | flex-start | flex-end | baseline */
gap:             0.4rem;        /* = space between the <a>s */
border:          0.4rem solid rgb(51, 255, 0);
}

a {
display:         flex;
flex:            0 0 auto;      /* = start off autosized based on the item(s) inside here; neither grow nor shrink beyond that. */
flex-flow:       column nowrap; /* = (vertical) place additional content that is located within the <a> (if any) under the current content */
justify-content: flex-start;    /* = (vertical) the item(s), if different heights, should cling to the top */
align-items:     center;        /* = (horizontal) if the <a>s were to be be allowed to grow wider than neccecary, then center the item(s) within the link; alternatives: flex-start | flex-end | center */
}

.item {
width:           300px;
height:          300px;
background:      gray;
}

/* a { padding: 0.4rem; background: blue; }       /* uncomment to see that the <a> could be bigger than its content */
/* a:first-child .item { height: 400px; }         /* uncomment to see what happens when one of the items is taller */
/* .box { width: 800px; } .item { width: 100px; } /* uncomment to see what happens if the box was wider than neccecary */

<div >
    <a href="#"><div ></div></a>
    <a href="#"><div ></div></a>
    <a href="#"><div ></div></a>
</div>

CodePudding user response：

Perhaps this might help. I'm adding display: flex and align-items: center to the .shop-box class, and justify-content: space-between to .box.

Learn more about CSS Flexbox here.

.shop-container {
  height: auto;
  margin: 0 auto;
  padding: 10px;
  position: relative;
  margin-top: 30px;
  border: 5px solid red;
  width: 100%;
  height: 400px;
}

.shop-box {
  display: flex;
  align-items: center;
  width: 95%;
  height: 83%;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border: 5px solid rgb(51, 255, 0);
}

.box {
  display: flex;
  justify-content: space-between;
  position: absolute;
  width: 100%;
  margin: 5 5px;
}
.item {
  background: gray;
  width: 300px;
  height: 300px;
  margin: 0 5px;
}

 <div >
  <div >
    <div >
      <a href="#"><div ></div></a>
      <a href="#"><div ></div></a>
      <a href="#"><div ></div></a>
    </div>
  </div>
</div>