Вопрос или проблема
Я не могу центрировать иконки звёзд Bootstrap рядом с текстом отзыва на сайте, который я разрабатываю. Я вставил SVG в свой код. Здесь я также использую некоторые классы Bootstrap 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;
}<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<section id="reviews" class="reviews container-md">
<div class="review-item">
<p class="review-name">Брайан С.</p>
<p class="review-location">МЕСТО ОТЗЫВА</p>
<p class="review-date">
<span class="stars"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
fill="currentColor" class="bi bi-star-fill" viewBox="0 0 16 16">
<path
d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z" />
</svg><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
class="bi bi-star-fill" viewBox="0 0 16 16">
<path
d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z" />
</svg><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
class="bi bi-star-fill" viewBox="0 0 16 16">
<path
d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z" />
</svg><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
class="bi bi-star-fill" viewBox="0 0 16 16">
<path
d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z" />
</svg><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
class="bi bi-star-fill" viewBox="0 0 16 16">
<path
d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z" />
</svg></span> 10 июля 2019
</p>
<p class="review-content">ТЕКСТ ОТЗЫВА</p>
<p class="blockquote-footer">Yelp</p>
</div>
</section> Я пытался использовать свойство vertical-align без успеха. Это не дало реальной разницы в классе stars-container. Использование vertical-align с классом stars (span, содержащий SVG) тоже не дало результата, поэтому я даже не включил это:
.stars { vertical-align: center; }
После изучения этой проблемы я попробовал класс bootstrap mx-auto (в моем случае my-auto), предложенный другим пользователем, но это не сработало для меня. Не знаю, что ещё попробовать.
Ответ или решение
Вам нужно отцентрировать иконки звезд рядом с текстом отзыва по вертикали. Для достижения этого эффекта можно использовать несколько CSS-свойств и классов Bootstrap. Давайте посмотрим на ваш код и внесем необходимые изменения.
Шаги для решения проблемы:
-
Используйте Flexbox: Flexbox позволяет гибко управлять выравниванием элементов как по горизонтали, так и по вертикали. Вам нужно добавить некоторые стили к
.review-date. - Обновите HTML: Убедитесь, что ваши элементы обёрнуты в контейнер для Flexbox.
Обновлённый CSS:
.reviews {
color: black;
}
.review-name {
font-weight: 700;
margin-bottom: 2px;
margin-top: 40px;
}
.review-location {
font-weight: 400;
}
.review-date {
display: flex; /* Включает Flexbox */
align-items: center; /* Центрирует по вертикали */
font-weight: 400;
}
.stars {
margin-right: 5px; /* Добавляем немного пространства между звёздами и текстом */
}
.review-content {
font-size: .9rem;
}Обновлённый HTML:
<section id="reviews" class="reviews container-md">
<div class="review-item">
<p class="review-name">Brian C.</p>
<p class="review-location">REVIEW LOCATION</p>
<p class="review-date">
<span class="stars">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
fill="currentColor" class="bi bi-star-fill" viewBox="0 0 16 16">
<path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z" />
</svg>
<!-- Другие звёзды -->
</span>
Jul 10, 2019
</p>
<p class="review-content">REVIEW TEXT</p>
<p class="blockquote-footer">Yelp</p>
</div>
</section>Объяснение изменений:
- Мы добавили класс
display: flex;к классу.review-date, что позволит контейнеру использовать Flexbox. - Использование
align-items: center;в классе.review-dateвыравнивает элементы по вертикали по центру. - Мы добавили отступ справа в классе
.stars, чтобы пространство между звёздами и датой было визуально привлекательнее.
Теперь иконки звёзд должны правильно центрироваться по вертикали рядом с текстом даты. Если у вас остались вопросы или проблемы, не стесняйтесь спрашивать!