Как выровнять элементы?

Question

[Devero97]

Помогите отцентрировать элементы. Мне мешает line-haight у элемента с классом rating_item.
Тег a центрируется относительно тега с классом rating_item. Но внутри этого тега есть абсолютно позиционирующийся тег, который появляется когда я указываю ширину для него. Если я уберу line-haight у тега rating_item, то абсолютный тег, который находится внутри тега rating_item не будет корректно отображаться из-за того, что в псевдо-классе есть иконочный шрифт, и он собственно будет сплюснут из-за line-haight: 0. Я уже всяк пробовал, но менять структуру не хотелось бы. Либо переделать как структуру, но чтобы работало как задумано.

<div class=rating">
               <div class="rating_item">
                  <div class="rating_item_stars"></div>
              </div>
              <a href="#reviews" class="reviews">25 отзывов</a >

.rating {
          display: flex;
          align-items: center;
        }
.rating_item {
  position: relative;
  display: inline-block;
}

.rating_item_stars {
    position: absolute;
    top: 0;
    left: 0;
    white-space: nowrap;
    overflow: hidden;
    width: 0;
  }
.rating_item_stars::before {
  content: '\e800 \e800 \e800 \e800 \e800';
  font-family: 'fontello';
  color: #f8ce0b;
  font-size: 2.5rem;
}
.rating_item::before {
  content: '\e800 \e800 \e800 \e800 \e800';
  font-family: 'fontello';
  color: #ccc;
  font-size: 2.5rem;
}
          .reviews {
            margin-left: 0.8rem;
            color: #259ef5;
          }

Comments

[Ankhena]

Помогите отцентрировать элементы.

А начните, знаете с чего?
Посмотрите на код, который вы выложили.
Он ровно отформатирован?
Его вообще удобно воспринимать?
Вот приведите его в читаемый вид, потом сотворите действующую песочницу с видимой проблемой на jsfiddle.net .
Глядишь и помощь придет.

[Devero97]

Ankhena, хм, код здесь как дополнение. Проблема не существенна. Просто по моему тексту можно накидать правильный пример и на том же сайте. Если Вы хотите помочь, давно бы это сделали, а не писали комментарий по чистоте моего кода. Спасибо.

[Ankhena]

Devero97, чистота вашего кода помогает его воспринимать с экрана без песочницы. Сразу. А не разбирая по строчкам. Песочница помогает еще проще увидеть, что вы там натворили через инспектор.
Вы же, наверное, хотите быстрее получить ответ на свой вопрос.

А так, немешающий line-height это 1, а не 0.
Ставить флекс-элементам inline-block - бесполезно (хорошо только для старых браузеров, на случай когда нет флекса).
Ставить inline-block и не указывать vertical-align чревато кривулями.

Если вы собираетесь делать рейтинг на html/css, то вам нужны инпуты и т.д.
Если на js, то достаточно одного div и одного его псевдо и кастомного свойства.
Если на SVG, то всё вообще не так.
Варианты реализации легко ищутся на codepen.

[Devero97]

Ankhena, Вариант с прописыванием line-height не работает. Пришлось применить костыль и задать отрицательный margin тегу с классом rating_item