Выравнивание текста и значка в центре поля в Bootstrap

Question

Я пытаюсь выровнять текст и значки, которые находятся в окне, по центру. Я хочу, чтобы это центрировалось так:

Я попробовал следующее: добавив align-content: center и justify-content: center как встроенный стиль в тег div для строки, но не повезло. Любые подсказки или пожелания приветствуются. Я предоставил ссылку jsfiddle, чтобы показать вам, что у меня есть сейчас. На данный момент все содержимое осталось.

https://jsfiddle.net/silosc/76ktyveu/4/

<div class="row" style="width:100%">
    <div class="report-card-i report-card-i-height">
        <h3 class="m-l-35 p-t-25 p-b-10">Stats</h3>
        <div class="fa-orange m-t-10 m-b-15">
            <div class="row">
                <div class="col-sm-3 col-xs-3">
                    <i class="fa fa-star m-r-15">Stat1</i>
                </div>

                <div class="col-sm-2 col-xs-3">
                    <i class="fa fa-angle-right"></i>
                </div>
            </div>
            <br />
            <div class="row">
                <div class="col-sm-3 col-xs-3">
                    <i class="fa fa-star m-r-15">Stat2</i>
                </div>

                <div class="col-sm-2 col-xs-3">
                    <i class="fa fa-angle-right"></i>
                </div>
            </div>
            <br />
            <div class="row">
                <div class="col-sm-3 col-xs-3">
                    <i class="fa fa-star m-r-15">Stat3</i>
                </div>

                <div class="col-sm-2 col-xs-3">
                    <i class="fa fa-angle-right"></i>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
   .report-card-i{
    background: orange;
    box-shadow: 2px 2px 10px 4px rgba(0, 0, 0, 0.2);
    position: relative;
    margin-top: 30px;
}

 .report-card-i-height {
    min-height: 280px;
    height: auto;
    width: 100%;
        }

.report-name {
    font-family: Questrial;
    font-weight: bold;
    color: #f0522f !important;
        }
</style>

Answer 1

Попробуйте: .fa {margin-left: 50%; transform: translateX (-50%); } и если вам нужно пространство между значком и текстом, попробуйте: .fa-star: before {padding-right: 20px; }

Answer 2

Поскольку вы используете bootstrap, вы можете использовать класс text-left. Кроме того, многие ваши bootstrap поля и классы заполнения установлены неправильно ... поля от mr-1 до mr-5. Одинаковый формат для отступов

.report-card-i {
  background: orange;
  box-shadow: 2px 2px 10px 4px rgba(0, 0, 0, 0.2);
  position: relative;
  margin-top: 30px;
}

.report-card-i-height {
  min-height: 280px;
  height: auto;
  width: 100%;
}

.report-name {
  font-family: Questrial;
  font-weight: bold;
  color: #f0522f !important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="row" style="width:100%">
  <div class="report-card-i report-card-i-height">
    <h3 class="ml-5 pt-5 pb-2">Stats</h3>
    <div class="fa-orange mt-5 mb-5">
      <div class="row">
        <div class="col-sm-3 col-xs-3 text-center">
          <i class="fa fa-star">Stat1</i>
        </div>

        <div class="col-sm-2 col-xs-3">
          <i class="fa fa-angle-right"></i>
        </div>
      </div>
      <br />
      <div class="row">
        <div class="col-sm-3 col-xs-3 text-center">
          <i class="fa fa-star m-r-15">Stat2</i>
        </div>

        <div class="col-sm-2 col-xs-3">
          <i class="fa fa-angle-right"></i>
        </div>
      </div>
      <br />
      <div class="row">
        <div class="col-sm-3 col-xs-3 text-center">
          <i class="fa fa-star m-r-15">Stat3</i>
        </div>

        <div class="col-sm-2 col-xs-3">
          <i class="fa fa-angle-right"></i>
        </div>
      </div>
    </div>
  </div>
</div>