居中对齐三个类 css答案

【问题标题】：align in center three classes css居中对齐三个类 css
【发布时间】：2017-12-17 22:28:02
【问题描述】：

我有以下 HTML 类：

<div class="image-changing">
    <ion-icon name="ios-arrow-back" class="arrow-back"></ion-icon>
    <ion-icon name="ios-arrow-back" class="arrow-back"></ion-icon>
    <span class="circle"></span>
    <ion-icon name="ios-arrow-forward" class="arrow-forward"></ion-icon>
    <ion-icon name="ios-arrow-forward" class="arrow-forward"></ion-icon>
</div>

还有以下 CSS：

.arrow-back {
    position: relative + 100px;
    // margin-right: auto;
    // align: center;       
    float:left;
    font-size:60px;
    color:white;
}

.arrow-forward {
    left: 20%;
    float:right;
    font-size:60px;
    color:white;
    position: calc(100% - 1 em);
}

.image-changing {
    width: 80%; margin: 0 auto;
}

有人知道如何将五个组件居中对齐吗？

【问题讨论】：

position: relative + 100px; - 这不是 CSS。
居中和浮动是对立的。停止浮动元素，使用 inline-block 代替，并在父元素上对齐文本。
是一个指令。生成的 HTML 是什么？
我投票决定将此问题作为离题结束，因为 CSS 无效并且是导致此问题的原因（至少部分如此）。

标签： html css center-align

【解决方案1】：

尝试添加以下属性：

.image-changing { text-align: center;} 
.arrow-back, .circle, .arrow-forward  { display: inline-block; }

【讨论】：

【解决方案2】：

这应该可以解决问题。使用元素居中的 flexbox。

.arrow-back {
  font-size: 60px;
  color: white;
}

.arrow-forward {
  font-size: 60px;
  color: white;
}

.image-changing {
  width: 80%;
  margin: 0 auto;
  display: flex;
  justify-content: center;
}

<div class="image-changing">
  <ion-icon name="ios-arrow-back" class="arrow-back"></ion-icon>
  <ion-icon name="ios-arrow-back" class="arrow-back"></ion-icon>
  <span class="circle"></span>
  <ion-icon name="ios-arrow-forward" class="arrow-forward"></ion-icon>
  <ion-icon name="ios-arrow-forward" class="arrow-forward"></ion-icon>
</div>

【讨论】：