Как поместить текст на уровне геометрической фигуры?
.block_1 { width: 500px; display: block; } .text { float: left; font-size: 17px; line-height: 21px; font-weight: 400; color: #1eacc7; margin: 0px 0 0 150px; } .para { max-width: 500px; margin: 0 0 0 150px; font-size: 15px; font-weight: 300; } .radius { margin: 40px 0 0 150px; width: 109px; height: 109px; border-radius: 100%; background-color:#1eacc7; display: inline-block; /* box-sizing: border-box; */ } .radius_2 { margin: 0px 0 0 700px; width: 109px; height: 109px; border-radius: 100%; background-color:#1eacc7; display: inline-block; /* box-sizing: border-box; */ } |
.block_1 { width: 500px; display: block; } .text { float: left; font-size: 17px; line-height: 21px; font-weight: 400; color: #1eacc7; margin: 0px 0 0 150px; } .para { max-width: 500px; margin: 0 0 0 150px; font-size: 15px; font-weight: 300; } .radius { margin: 40px 0 0 150px; width: 109px; height: 109px; border-radius: 100%; background-color:#1eacc7; display: inline-block; /* box-sizing: border-box; */ } .radius_2 { margin: 0px 0 0 700px; width: 109px; height: 109px; border-radius: 100%; background-color:#1eacc7; display: inline-block; /* box-sizing: border-box; */ }
У меня получается что текст находится под фигурой, margin по нулям, как поместить текст на уровне фигуры?
У меня получается вот так https://imgur.com/HzvxuRr
А должно быть вот так https://imgur.com/RfZclnu
<section class="work"> <div class="container"> <div class="row"> <button class="benefits_btn">ПРЕИМУЩЕСТВА</button> <div class="work_header">8 ПРИЧИН РАБОТАТЬ С НАМИ</div> </div> <div class="container"> <div class="radius"> <div class="radius_2"></div> <div class="block_1"> <div class="text">Никаких наличных, оплата происходит автоматически</div> <div class="para">Стоимость поездки оплачивается пассажиром с привязанной банковской карты, т.е. нет никаких рисков связанных с перевозкой наличности как для пассажира, так и для водителя, Вам не нужно искать мелкие деньги для размена. </div> </div> </div> </div> </section> |
<section class="work"> <div class="container"> <div class="row"> <button class="benefits_btn">ПРЕИМУЩЕСТВА</button> <div class="work_header">8 ПРИЧИН РАБОТАТЬ С НАМИ</div> </div> <div class="container"> <div class="radius"> <div class="radius_2"></div> <div class="block_1"> <div class="text">Никаких наличных, оплата происходит автоматически</div> <div class="para">Стоимость поездки оплачивается пассажиром с привязанной банковской карты, т.е. нет никаких рисков связанных с перевозкой наличности как для пассажира, так и для водителя, Вам не нужно искать мелкие деньги для размена. </div> </div> </div> </div> </section>
Дополнительно:
html код почему то не дает выгрузить на сайт :(
Имеет смысл прочитать правила и обратить внимание на то, что в окошке редактора вопроса есть разные кнопочки, в том числе для вставки картинок и кода.
И будет хорошо, если приложите код в песочнице codepen.io, так его удобнее и смотреть и править.
И песочницы тоже не вижу.
Но ответить могу:
1. В современном мире для построения сеток используют флексы и гриды.
Флоаты используют только по назначению - для обтекания одного элемента другими или текстом.
В вашем макете никакого обтекания нет в помине.
2. Иконки являются украшениями, а не значимым контентом. В разметке они лишние. Такие штуки делают псевдоэлементами.
В разметке: список из 8 пунктов.
В каждом из которых заголовок и p.
Дальше гридом 2х2.
Псевдоэлемент располагается в первом столбце и двух рядах.
3. В процессе создания вопроса пользователь Сервиса обязан:
3.9. Использовать для вставки изображений тег < img> (размещение ссылок на изображения без использования тега < img> запрещено).
Вот так:
Ответы:
Вот пример, который может вам подойти: код тут
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Для того чтобы поместить текст на уровне геометрической фигуры, можно воспользоваться CSS свойством position и значениями absolute или relative. Ниже приведен пример использования данного метода с помощью HTML и CSS:
HTML:
<div class="container">
<div class="shape">
<p>Текст на уровне геометрической фигуры</p>
</div>
</div> |
<div class="container"> <div class="shape"> <p>Текст на уровне геометрической фигуры</p> </div> </div>
CSS:
.container { position: relative; width: 200px; height: 200px; } .shape { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100px; height: 100px; background-color: #f1f1f1; border: 1px solid #ccc; text-align: center; } |
.container { position: relative; width: 200px; height: 200px; } .shape { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100px; height: 100px; background-color: #f1f1f1; border: 1px solid #ccc; text-align: center; }
В данном примере мы создаем контейнер с классом "container", в котором размещается элемент с классом "shape". Свойство position: relative устанавливается для контейнера, а для элемента "shape" мы используем position: absolute, чтобы позиционировать его относительно контейнера.
С помощью свойств top и left мы центрируем элемент по горизонтали и вертикали. Свойство transform: translate(-50%, -50%) используется для точного центрирования элемента. Также задаем ширину, высоту, цвет фона, границы и выравнивание текста по центру.
Таким образом, используя комбинацию CSS свойств position, top, left и transform, мы можем поместить текст на уровне геометрической фигуры.
Для того чтобы поместить текст на уровне геометрической фигуры, можно воспользоваться различными методами и инструментами веб-разработки. В данном ответе рассмотрим несколько способов, которые помогут вам реализовать данную задачу.
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 = '
Ваш текст здесь
';
```
В заключение, существует несколько способов поместить текст на уровне геометрической фигуры, каждый из которых имеет свои преимущества и недостатки. Выберите тот метод, который лучше всего подходит для вашего конкретного случая и требований. Надеюсь, данная информация была полезной для вас!