每當我將 SVG 插入到我的網格布局中時，它1)不會居中，并且2)會破壞網格的布局。請問如何解決這個問題，以便播放圖示以與播放文本相同的方式顯示。
這是破壞的布局：
.body { background-color: hsl(0,0%,10%); color: white; font-size: 32px; }
.center_children { display: flex; justify-content: center; }
.timer
{
width: 12rem; height: 12rem; border-radius: 50%;
background-color: hsl(0, 50%, 50%);
display:grid; grid-template-rows: 2fr 1fr; gap: 1.5rem;
}<div class="body">
<br />
<div class="timer">
<div class="center_children">
<div class="play">Play</div>
</div>
<div class="center_children">1:39</div>
</div>
<br />
</div>
<br /><br />
<div class="body">
<br />
<div class="timer">
<div class="center_children">
<div class="play">
<svg width="100%" height="100%" viewBox="0 0 100 100" ><polygon points="0,0 75,50 0,100" style="fill:#fff;" /></svg>
</div>
</div>
<div class="center_children">1:39</div>
</div>
<br />
</div>uj5u.com熱心網友回復：
以下是您的代碼中的問題：
- 您尚未指定網格 rows和columns的寬度和高度，因此隨著 svg 的增長，它會將網格推離您的預期對齊方式。
fr單位是可用空間的分數。它們將根據您的內容移動。如果您希望將行固定為 33% 和 66%，那么您必須使用%notfr。- 您尚未添加
justify-content: center以使列居中。你不需要 flexbox。 - 如果要顯示整個影像，則無需為 SVG 指定 viewBox。您不了解 viewport 與 viewBox（閱讀https://webdesign.tutsplus.com/tutorials/svg-viewport-and-viewbox-for-beginners--cms-30844）。
這是固定的代碼（自己添加一點填充以使事情相對于圓圈看起來很完美）：
.body { background-color: hsl(0,0%,10%); color: white; font-size: 32px; }
.timer
{
width: 12rem; height: 12rem; border-radius: 50%;
background-color: hsl(0, 50%, 50%);
display:grid; grid-template-rows: 66% 33%;
grid-template-columns: 5rem;
justify-content: center;
}<div class="body">
<div class="timer">
<div class="play">
<svg width="100%" height="100%" ><polygon points="0,0 75,50 0,100" style="fill:#fff;" /></svg>
</div>
<div>1:39</div>
</div>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/489940.html