NickD NickD - 2 months ago 11
CSS Question

How to align contents inside flexbox

I 've got 3 items and need to align their contents horizontally, in center. So itemAContainer and itemCContainer will displayed as itemB in the middle and not at the left side..(White bordered Boxes)

Is there anyway to do this without changing itemAContainer and itemCContainer and their childs? I tried many solutions with no luck.



#wrapper {padding-top:2px;color:#ff0000;background:#3a3a39;border-radius:4px; margin-top:44px; width:100%;}
.section-wrapper {display: flex;height: 100%;display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex;
align-items: center; justify-content: center;}
.left, .center, .right {min-width: 166px;}
.left { flex: 0 33%;}
.center { flex: 33%;}
.right { flex: 0 33%;}
.home-left {margin:-1px 4px -1px -4px; border:1px solid #fff;border-top-left-radius:8px; border-bottom-left-radius:8px;border-top-right-radius:8px;border-bottom-right-radius:8px;z-index:1;}
.home-center {display:table-cell; background-color:#3a3a39; margin:-1px 4px -1px -4px; width:33.3%; text-align:center;z-index:1;}
.home-right {margin-right:2px;border:1px solid #fff;border-top-left-radius:8px;border-bottom-left-radius:8px;border-top-right-radius:8px;border-bottom-right-radius:8px;z-index:1;}

<div id="wrapper">
<div class="section-wrapper">
<div class="left">
<div class="home-left">
<div id="itemAContainer" style="position:relative;width:168px; height:440px;">
<div id="itemAImage" style="position: absolute; bottom: 0;">
<img src="https://i.imgsafe.org/191427cf89.png" border="1" style="width:166px;height:420px;z-index:10;">
</div>
</div>
</div>
</div>
<div class="center"><div class="home-center"><img src="https://i.imgsafe.org/19143b4e85.png" width="166" height="420" border="1" alt=""/></div></div>
<div class="right">
<div class="home-right">
<div id="itemCContainer" style="position:relative;width:168px; height:440px;">
<div id="itemCImage" style="position: absolute; bottom: 0;">
<img src="https://i.imgsafe.org/191452f4ea.png" border="1" style="width:166px;height:420px;z-index:10;">
</div>
</div>
</div>
</div>
</div>
</div>




Answer

You need to make your home-left and home-right classes flex-containers as well.


#wrapper {
  padding-top: 2px;
  color: #ff0000;
  background: #3a3a39;
  border-radius: 4px;
  margin-top: 44px;
  width: 100%;
}
.section-wrapper {
  display: flex;
  height: 100%;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  align-items: center;
  justify-content: center;
}
.left,
.center,
.right {
  min-width: 166px;
}
.left {
  flex: 0 33%;
}
.center {
  flex: 33%;
}
.right {
  flex: 0 33%;
}
.home-left {
  margin: -1px 4px -1px -4px;
  border: 1px solid #fff;
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
  z-index: 1;
  display: flex;
  justify-content: center;
}
.home-center {
  display: table-cell;
  background-color: #3a3a39;
  margin: -1px 4px -1px -4px;
  width: 33.3%;
  text-align: center;
  z-index: 1;
}
.home-right {
  margin-right: 2px;
  border: 1px solid #fff;
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
  z-index: 1;
  display: flex;
  justify-content: center;
}
<div id="wrapper">
  <div class="section-wrapper">
    <div class="left">
      <div class="home-left">
        <div id="itemAContainer" style="position:relative;width:168px; height:440px;">
          <div id="itemAImage" style="position: absolute; bottom: 0;">
            <img src="https://i.imgsafe.org/191427cf89.png" border="1" style="width:166px;height:420px;z-index:10;">
          </div>
        </div>
      </div>
    </div>
    <div class="center">
      <div class="home-center">
        <img src="https://i.imgsafe.org/19143b4e85.png" width="166" height="420" border="1" alt="" />
      </div>
    </div>
    <div class="right">
      <div class="home-right">
        <div id="itemCContainer" style="position:relative;width:168px; height:440px;">
          <div id="itemCImage" style="position: absolute; bottom: 0;">
            <img src="https://i.imgsafe.org/191452f4ea.png" border="1" style="width:166px;height:420px;z-index:10;">
          </div>
        </div>
      </div>
    </div>
  </div>
</div>