I'm trying to center the div element with 29% value inside an svg circle. I've tried to center it using relative and absolute properties but it didn't seem to work

<!-- Tailwind -->
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">


<!-- Body -->
<div >
  <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  cx="60" cy="60" r="54" fill="none" stroke="#f77a52" stroke-width="12" pathLength="100" />
        </svg>
  <div  style="font-family: 'Titillium Web', sans-serif;">29%</div>
</div>

CodePudding user response：

1. You need to limit the width of the container by adding the class w-min. Otherwise it will by default span the entire available width as the div is a block-level-element.

2. You need to add following classes to the absoltue positioned elements to center it: top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2

3. You can remove the inset-0 class at it does nothing for you

<!-- Tailwind -->
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">


<!-- Body -->
<div >
  <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  cx="60" cy="60" r="54" fill="none" stroke="#f77a52" stroke-width="12" pathLength="100" />
        </svg>
  <div  style="font-family: 'Titillium Web', sans-serif;">29%</div>
</div>

CodePudding user response：

You did not define the width/height of the parent container. A simpler approach could also be using flexbox instead of relative/absolute positioning. Especially when it comes to vertical alignment of text within a container.

<!-- Tailwind -->
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">


<!-- Body -->
<div >
  <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  cx="60" cy="60" r="54" fill="none" stroke="#f77a52" stroke-width="12" pathLength="100" />
        </svg>
  <div  style="font-family: 'Titillium Web', sans-serif;">29%</div>
</div>