Svg和文本根据屏幕大小更改对齐方式

Question

我有一个svg元素和一个flexbox中的文本。我试图将这些元素对齐，以保持居中，但突然间，当我在不同的设备上尝试不同的屏幕大小时，svg和文本都错位了。有没有办法把它们修好？这是代码：

<div class="f-30w f-col sub-card menu-item">
<svg viewBox="0 0 36 36" class="circular-chart">
<path class="circle" id="perc_circle"
stroke-dasharray="60, 100"
d="M18 2.0845
a 15.9155 15.9155 0 0 1 0 31.831
a 15.9155 15.9155 0 0 1 0 -31.831"
/>
<path class="circle external"
stroke-dasharray="100, 100"
d="M18 2.0845
a 15.9155 15.9155 0 0 1 0 31.831
a 15.9155 15.9155 0 0 1 0 -31.831"
/>
</svg>

<h4 style="position: absolute;margin: 1.9rem 2.7rem;font-size: 20px;">{{livello_pulito}}</h4>
<h4 style="
font-size: 9px;
position: absolute;
margin: 3.1rem 1.8rem;
font-weight: bold;
">LIVELLO</h4>
</div>
</div>

Answer 1

在css中，您必须放置以下内容：

@media (max-width: 812px) {
h4 {
margin: 0px;
}
}

将812px更改为设备的屏幕宽度。我不知道你在什么设备上使用它，所以我不能告诉你确切的像素大小。然后把样式放在括号里，这样它在你的设备上看起来很好看。