Как поместить текст на уровне геометрической фигуры?

У меня получается что текст находится под фигурой, margin по нулям, как поместить текст на уровне фигуры?
У меня получается вот так https://imgur.com/HzvxuRr
А должно быть вот так https://imgur.com/RfZclnu

Дополнительно:

html код почему то не дает выгрузить на сайт 🙁

Имеет смысл прочитать правила и обратить внимание на то, что в окошке редактора вопроса есть разные кнопочки, в том числе для вставки картинок и кода.

И будет хорошо, если приложите код в песочнице codepen.io, так его удобнее и смотреть и править.

  • Ankhena, Исправил
  • lesha2008, извините, но я по-прежнему вижу картинки не тут в спойлере, а ссылками куда-то там.
    И песочницы тоже не вижу.

    Но ответить могу:
    1. В современном мире для построения сеток используют флексы и гриды.
    Флоаты используют только по назначению - для обтекания одного элемента другими или текстом.
    В вашем макете никакого обтекания нет в помине.

    2. Иконки являются украшениями, а не значимым контентом. В разметке они лишние. Такие штуки делают псевдоэлементами.

    В разметке: список из 8 пунктов.
    В каждом из которых заголовок и p.
    Дальше гридом 2х2.
    Псевдоэлемент располагается в первом столбце и двух рядах.

  • lesha2008, https://qna.habr.com/help/rules

    3. В процессе создания вопроса пользователь Сервиса обязан:
    3.9. Использовать для вставки изображений тег < img> (размещение ссылок на изображения без использования тега < img> запрещено).

    Вот так:

    Как поместить текст на уровне геометрической фигуры?

    • Ответы:

    Вот пример, который может вам подойти: код тут

    + Заказать

     

    Для решения данной проблемы вы можете воспользоваться услугами фрилансеров. Мы выполним необходимую работу быстро и качественно.

     

      • Как поместить текст на уровне геометрической фигуры?Есть ответ
      • 09.04.2024
      Ответить

      Для того чтобы поместить текст на уровне геометрической фигуры, можно воспользоваться CSS свойством position и значениями absolute или relative. Ниже приведен пример использования данного метода с помощью HTML и CSS:

      HTML:

      CSS:

      В данном примере мы создаем контейнер с классом "container", в котором размещается элемент с классом "shape". Свойство position: relative устанавливается для контейнера, а для элемента "shape" мы используем position: absolute, чтобы позиционировать его относительно контейнера.

      С помощью свойств top и left мы центрируем элемент по горизонтали и вертикали. Свойство transform: translate(-50%, -50%) используется для точного центрирования элемента. Также задаем ширину, высоту, цвет фона, границы и выравнивание текста по центру.

      Таким образом, используя комбинацию CSS свойств position, top, left и transform, мы можем поместить текст на уровне геометрической фигуры.

      • Как поместить текст на уровне геометрической фигуры?Есть ответ
      • 07.04.2024
      Ответить

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

      1. Использование CSS:
      Один из самых простых способов поместить текст на уровне геометрической фигуры - это использование CSS. Вы можете создать блок с заданными размерами и формой (например, круг, квадрат, треугольник и т.д.), после чего вставить внутрь этого блока текст. Для этого вам понадобятся некоторые знания CSS, например, использование свойства "shape-outside", которое задает контур для текста, или свойства "clip-path", которое обрезает содержимое блока по указанному контуру.

      Пример использования CSS для создания круглого блока с текстом внутри:
      html

      Ваш текст здесь

      css
      .circle {
      width: 200px;
      height: 200px;
      border-radius: 50%;
      background-color: #f0f0f0;
      text-align: center;
      display: flex;
      justify-content: center;
      align-items: center;
      }

      2. Использование SVG:
      Другой способ поместить текст на уровне геометрической фигуры - использование SVG. SVG (Scalable Vector Graphics) позволяет создавать векторные изображения, которые могут быть использованы как контейнеры для текста. Вы можете создать любую фигуру с помощью SVG и вставить внутрь нее текст.

      Пример использования SVG для создания квадратного блока с текстом внутри:
      html

      Ваш текст здесь

      3. Использование JavaScript:
      Третий способ - это использование JavaScript для динамического создания геометрических фигур и вставки текста внутрь них. Вы можете создать функцию, которая будет создавать HTML-элементы (например, div или svg) с заданными размерами и формой, после чего вставлять внутрь этих элементов текст.

      Пример использования JavaScript для создания треугольного блока с текстом внутри:
      html

      const triangle = document.getElementById('triangle');
      triangle.style.width = '0';
      triangle.style.height = '0';
      triangle.style.borderLeft = '100px solid transparent';
      triangle.style.borderRight = '100px solid transparent';
      triangle.style.borderBottom = '173.2px solid #f0f0f0';
      triangle.innerHTML = '

      Ваш текст здесь

      ';

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

    Оставить комментарий