Я не могу заставить значки начальной загрузки центрироваться вертикально рядом с текстом. ⇐ CSS

[Anonymous]

Я не могу расположить значки звездочек начальной загрузки по центру рядом с текстом обзора на веб-сайте, который я разрабатываю. Я встроил SVG в свой код. Здесь я также использую некоторые классы начальной загрузки 4 для контекста. Вот как это выглядит сейчас:
Внешний вид значков и текста звездочки обзора:


Мой код:

Код: Выделить всё

.reviews {
color: black;
}

.review-name {
font-weight: 700;
margin-bottom: 2px;
margin-top: 40px;
}

.review-location {
font-weight: 400;
}

.stars-container {
vertical-align: center;
}

.stars {}

.review-date {
font-weight: 400;
}

.review-content {
font-size: .9rem;
}

Код: Выделить всё

Brian C.
REVIEW LOCATION











 Jul 10, 2019

REVIEW TEXT
Yelp

            

Я пытался использовать свойство вертикального выравнивания, но безрезультатно. В классе звезд-контейнеров это не имело особого значения. Использование вертикального выравнивания с классом звезд (промежутком, охватывающим SVGS) тоже не имело никакого значения, поэтому я его даже не включал:

Код: Выделить всё

.stars {      vertical-align: center; }

Прочитав об этой проблеме, я попробовал класс начальной загрузки mx-auto (в моем случае my-auto), предложенный другим автором, но у меня он не сработал. . Не знаю, что еще попробовать.

Подробнее здесь: https://stackoverflow.com/questions/790 ... xt-to-text