我試圖div在一個 svg 圓圈內以 29% 的值將元素居中。我嘗試使用相對和絕對屬性將其居中，但似乎不起作用
<!-- Tailwind -->
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
<!-- Body -->
<div class="relative bg-red-100">
<svg width="120" height="120" viewBox="0 0 120 120">
<circle cx="60" cy="60" r="54" fill="none" stroke="#e6e6e6" stroke-width="12" />
<circle class="percent sixty" cx="60" cy="60" r="54" fill="none" stroke="#f77a52" stroke-width="12" pathLength="100" />
</svg>
<div class="absolute inset-0 text-5xl font-semibold text-gray-900" style="font-family: 'Titillium Web', sans-serif;">29%</div>
</div>uj5u.com熱心網友回復：
您需要通過添加類來限制容器的寬度
w-min。否則默認情況下它將跨越整個可用寬度，因為 div 是塊級元素。您需要將以下類添加到絕對定位元素以使其居中：
top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2您可以洗掉
inset-0課程，因為它對您沒有任何作用
<!-- Tailwind -->
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
<!-- Body -->
<div class="relative w-min bg-red-100">
<svg width="120" height="120" viewBox="0 0 120 120">
<circle cx="60" cy="60" r="54" fill="none" stroke="#e6e6e6" stroke-width="12" />
<circle class="percent sixty" cx="60" cy="60" r="54" fill="none" stroke="#f77a52" stroke-width="12" pathLength="100" />
</svg>
<div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 text-5xl font-semibold text-gray-900" style="font-family: 'Titillium Web', sans-serif;">29%</div>
</div>uj5u.com熱心網友回復：
您沒有定義父容器的寬度/高度。更簡單的方法也可以是使用 flexbox 代替相對/絕對定位。特別是當涉及到容器內文本的垂直對齊時。
<!-- Tailwind -->
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
<!-- Body -->
<div class="flex justify-center items-center bg-red-100 w-min">
<svg width="120" height="120" viewBox="0 0 120 120">
<circle cx="60" cy="60" r="54" fill="none" stroke="#e6e6e6" stroke-width="12" />
<circle class="percent sixty" cx="60" cy="60" r="54" fill="none" stroke="#f77a52" stroke-width="12" pathLength="100" />
</svg>
<div class="absolute w-min flex items-center justify-center text-5xl font-semibold text-gray-900" style="font-family: 'Titillium Web', sans-serif;">29%</div>
</div>uj5u.com熱心網友回復：
您還可以在div of 29%.
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
<!-- Body -->
<div class="relative bg-red-100 ">
<svg width="120" height="120" viewBox="0 0 120 120">
<circle cx="60" cy="60" r="54" fill="none" stroke="#e6e6e6" stroke-width="12" />
<circle class="percent sixty" cx="60" cy="60" r="54" fill="none" stroke="#f77a52" stroke-width="12" pathLength="100" />
</svg>
<div class="p-4 py-8 absolute inset-0 text-5xl font-semibold text-gray-900" style="font-family: 'Titillium Web', sans-serif;">29%</div>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/475338.html