Выровнять текст и значок по центру div

Я предлагаю использовать flex для этого, например https://codepen.io/jayu/pen/gObPVgj

<div class = "demo-solution demo-solution--flexbox">
   <img width = "100" height = "50" src = "http://placehold.it/100x50" alt = "" />
   <span>Alignment using flexbox</span>
</div>

.demo-problem, .demo-solution {
  font-size: 3em;
}

.demo-solution--flexbox {
  display: flex;
  align-items: center;
  margin:auto;
  img {
    margin: 10px;
    padding: 10px;
    transition: margin 300ms;
  }
}

Просто добавьте это в app.component.css:

.fa-caret-up {
  display: flex;
  justify-content: center;
}

Наслаждаться! :)

Небольшое объяснение:

• Не хотел добавлять больше классов
• Display flex отлично подходит для центрирования контента
• Если вы хотите узнать больше о display: flex, попробуйте это: https://flexbox.buildwithreact.com

решение без гибкого макета:

1. икона. добавить text-align: center; к родительскому div значка (относительно позиции)
2. описание добавьте left: 50%;transform: translate(-50%, 0); к разделу описания, чтобы реализовать выравнивание по центру. например: <div _ngcontent-ghu-c0 = "" class = "position-absolute" style = "word-wrap: break-word;left: 50%;transform: translate(-50%, 0);position: absolute;">F - RISCHIO MEDIO</div>. Убедитесь, что класс, относящийся к положению, имеет стиль position:relative;.

.box {
  text-align:center;
}
h3 {
  padding-top: 60px; 
  margin:0;
}
.line {
  display:inline-block;
  width: 50px;
  margin:auto;
  background-color: #f1f1f1; 
  position: relative;
}
.fCell {
  text-align:center;
}
.desc {
  white-space: nowrap;
}
.doCenter {
  position: absolute;
  left:50%;
  transform: translate(-50%, 0);
  color: red;
}

        <div class = "box">
            <h3>Original:</h3>
            <div class = "line">
                <div class = "fCell">F</div>
                <div class = "desc">hello world!</div>
            </div>
            <h3>use left/transform to center long size text:</h3>
            <div class = "line">
                <div class = "fCell">F</div>
                <div class = "desc doCenter">left/transform to center</div>
            </div>
            <h3>use left/transform to center small size text:</h3>
            <div class = "line">
                <div class = "fCell">F</div>
                <div class = "desc doCenter">f</div>
            </div>
        </div>

    <div *ngFor = "let scala of scalaRating; let i=index" class = "wrapper">
      <button ...></button>
      <ng-container *ngIf = "rating == scala.valoreRating" >
        <i class = "..."></i>
        <div style = "word-wrap: break-word;">{{scala.descrizioneValRating}}
        </div>
      </ng-container>
    </div>

уникальный класс: обертка (и забудьте position:absolute, margin-left.... :)

.wrapper{
  width:5rem;
  display:flex;
  flex-direction: column;
  justify-content:flex-start;
  align-items:center;
}

Посмотрите, как <i> и <div>{{scala.descriptineValRatting}}</div> имеют того же «родителя», что и <button>

Ваш разветвленный stackblitz