@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;
          }
  • Вопрос задан
  • 71 просмотр
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы