如何在不缩小宽度的情况下使SVG图像居中

Question

在我的三个块中，我有一个svg图像，但我的图像是这样的：

.rating {
text-align: center;
background-color: var(--light-grayish-magenta);
color: var(--very-dark-magenta);
font-weight: 700;
border-radius: 7px;
max-width: 26em;
margin-left: auto;
margin-right: auto;
}
.rating::before {
content: '';
width: 5.625em;
height: 1em;
display: block;
background-image: url(images/icon-star.svg);
background-repeat: space;
}

我有一个@media查询集。

@media screen and (min-width: 21.885em) /* breakpoint 350px phones ---> tablets */ {
.status {
max-width: 20em;
margin-left: auto;
margin-right: auto;
}
.rating {
padding: 0.9em;
}
.rating::before {
margin-right: 0;
margin-left: 0;
margin-bottom: 7px;
display: block;
max-width: 300px;
}

HTML代码：

<div class="status flow-content">
<div class="rating">Rated 5 Stars in Reviews</div>
<div class="rating">Rated 5 Stars in Report Guru</div>
<div class="rating">Rated 5 Stars in BestTech</div>
</div>

尽管当屏幕缩小时，图像也会随之缩小，并且会左右翻转。我试过左边、右边的边距，但显示不出来。有什么建议吗？

Answer 1

我似乎无法用您提供的代码复制您遇到的问题。然而，我确实设法将星星居中对齐，这样做更友好了。请尝试将以下内容添加到CSS元素中的'.rating:：before。

margin: 0 auto;