align in center three classes css

Question

I have the following HTML class:

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

And the following 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;
}

Does anyone have any idea how to center align the five components?

Centering and floating are opposites. Stop floating the elements, use inline-block instead, and text-align on the parent element. — CBroe, Jul 13 '17 at 08:47
I'm voting to close this question as off-topic because the CSS is invalid and the cause of this issue (at least in part). — Rob, Jul 13 '17 at 10:49

score 1 · Answer 1 · answered Jul 13 '17 at 09:23

1

try by adding following properties:

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

answered Jul 13 '17 at 09:23

brijrajsinh

453
3
11

score 0 · Answer 2 · edited Jul 13 '17 at 10:43

This should do the trick. Using a flexbox with the elements centered.

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

align in center three classes css

2 Answers2