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

【问题标题】：How to center an SVG image without shrinking the width如何在不缩小宽度的情况下使 SVG 图像居中
【发布时间】：2021-12-27 02:09:56
【问题描述】：

在我的三个块中，我有一个 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>

虽然当屏幕缩小时，图像也会缩小，并且它会左右翻转。我尝试了左右边距，但显示器无法弄清楚。有什么建议吗？

【问题讨论】：

标签： html css svg media-queries

【解决方案1】：

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

margin: 0 auto;

【讨论】：