Центрируйте div внутри круга svg с помощью Tailwindcss

Я пытаюсь центрировать элемент div со значением 29% внутри круга svg. Я пытался центрировать его, используя относительные и абсолютные свойства, но, похоже, это не сработало.

<!-- 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>

html css svg tailwind-css

10.05.2022 18:55

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

Ответ принят как подходящий

Вам нужно ограничить ширину контейнера, добавив класс 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>

10.05.2022 19:04

Вы не определили ширину/высоту родительского контейнера. Более простой подход также может заключаться в использовании 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>

10.05.2022 19:07

Вы также можете добавить отступы в 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>

11.05.2022 08:00

Другие вопросы по теме

В моем приложении реакции на кнопку добавления на карту есть отставание

Нацельтесь на один конкретный заголовок таблицы данных Jquery для стилей CSS

Есть ли способ узнать, находится ли пользователь в определенном заголовке, абзаце или div и т. д

Css сделать так, чтобы выбранные параметры отображались рядом друг с другом в строках

Что эквивалентно `width: max(100%, fit-content)`?

Размещение градиентного фона на изображении с прозрачным фоном

Несколько счетчиков слов для нескольких разделов

Как складывать разные div друг на друга (должно быть отзывчивым)

Как выровнять текст метки (многоязычный) в одну строку по ширине над полем ввода

Как убрать миникарту, полосу прокрутки в редакторе Monaco и как отключить запись в редакторе Monaco в react js?

Центрируйте div внутри круга svg с помощью Tailwindcss

Ответы 3

Другие вопросы по теме

Похожие вопросы