在中心对齐三个类 CSS

Question

我有以下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;
}

有谁知道如何居中对齐五个组件？

Answer 1

尝试添加以下属性：

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

Answer 2

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

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