css - 如何对齐 flexbox 中的内容

Question

我有 3 个元素，需要将它们的内容水平居中对齐。所以 itemAContainer 和 itemCContainer 将在中间而不是左侧显示为 itemB..(白色边框框)

是否可以在不更改 itemAContainer 和 itemCContainer 及其子项的情况下执行此操作？我尝试了很多解决方案，但都没有成功。

#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 1

您还需要将 home-left 和 home-right 类设为 flex 容器。

---

#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>