如何在不缩小宽度的情况下居中显示SVG图像
如何在不缩小宽度的情况下居中显示SVG图像
提问于 2021-11-15 22:33:40
在我的三个块中，我有一个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>然而，当屏幕缩小时，图像也会随之缩小，它会从一边翻到另一边。我尝试了左边距，右边距，但显示器不能计算出来。有什么建议吗？
回答 1
Stack Overflow用户
发布于 2021-11-15 22:46:24
我似乎无法使用您提供的代码复制您所遇到的问题。然而，我还是设法让星星居中对齐，这样做会更友好。尝试将以下内容添加到CSS元素的“.rating：：before”中。
margin: 0 auto;页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/69981684
复制相关文章
相似问题
腾讯云开发者
