Я нашел этот пример на stackoverflow:
Нарисуйте круг, используя только CSS
Что здорово. Но я хотел бы знать, как изменить этот пример, чтобы я мог включить текст в середине круга?
Я также нашел это: вертикально и горизонтально центрируя текст по кругу в CSS (например, значок уведомления iphone)
но по какой-то причине это не работает для меня. Когда я создаю следующий тестовый код:
<div class="badge">1</div>
вместо круга я получаю овальную форму. Я пытаюсь поиграть с кодом, чтобы увидеть, как я могу заставить его работать.
css
css-shapes
точка
источник
источник
border-radius:50%;
это сделает ваше событие кода более элегантным и переносимым, без необходимости каждый раз менять этот атрибут в зависимости от ширины и высоты;)Если ваш контент оборачивается и имеет неизвестный рост, это ваш лучший выбор:
http://cssdeck.com/labs/aplvrmue
Показать фрагмент кода
источник
display: absolute
нарушает соглашение - но простое решение - обернуть его внутри другого div.Вы можете использовать css3
flexbox
.HTML:
CSS:
Это позволит вам иметь вертикально и горизонтально выровненный по центру однострочный и многострочный текст.
Показать фрагмент кода
источник
Я думаю, что вы хотите написать текст в овал или круг? почему не этот?
источник
Для веб-дизайна, который мне недавно дали, я должен был решить центрированный и неизвестный объем текста в проблеме с фиксированным кругом, и я подумал, что поделюсь здесь решением для других людей, которые ищут комбинации круг / текст.
Основной проблемой, с которой я столкнулся, было то, что текст часто выходил за рамки круга. Чтобы решить эту проблему, я использовал 4 деления. Один прямоугольный контейнер, в котором указаны максимальные (фиксированные) границы круга. Внутри этого будет div, который рисует круг с его шириной и высотой, установленными на 100%, поэтому изменение размера родителя изменяет размер фактического круга. Внутри этого был бы другой прямоугольный div, который, используя% s, создавал бы область границы текста, предотвращая любой текст, покидающий круг (по большей части), и, наконец, фактический div для текста и вертикального центрирования.
Это имеет больше смысла как код:
Вы можете раскомментировать цвета границ в элементах div контейнера, чтобы увидеть, как это ограничивает.
Вещи, о которых следует знать: вы все еще можете выйти за границы круга, если вы поместите слишком много текста или будете использовать слишком длинный текст. Он по-прежнему не подходит для совершенно неизвестного текста (например, пользовательского ввода), но работает лучше всего, когда вы смутно знаете, какое наибольшее количество текста вам нужно сохранить, и соответственно установите размер круга и размеры шрифта. Вы можете установить текстовый контейнер div, чтобы скрыть любое переполнение, конечно, но это может выглядеть просто «сломанным» и не является заменой для фактического учета максимального размера в вашем дизайне.
Надеюсь, это кому-нибудь пригодится! HTML / CSS не моя основная дисциплина, поэтому я уверен, что это можно улучшить!
источник
Нарисуйте круг с текстом посередине с тегом HTML и без CSS
источник
font-size
,font-family
,x
иy
выстраиваются в очередь. Для тех, кто не имеет установленного Verdana, он не будет центрирован. Использованиеx="50%" y="50%" dominant-baseline="middle" text-anchor="middle"
также не решает проблему.Если это только одна строка текста, вы можете использовать свойство line-height с тем же значением, что и высота элемента:
Если текст содержит несколько строк, или если содержимое является переменным, вы можете использовать padding-top:
Пример: http://jsfiddle.net/2GUFL/
источник
Конечно, вы должны использовать теги, чтобы сделать это. Один для создания круга, а другой для текста.
Здесь какой-то код может помочь вам
Живой пример здесь http://jsbin.com/apumik/1/edit
Обновить
Здесь меньше поменьше с небольшими изменениями
http://jsbin.com/apumik/3/edit
источник
Для меня только это решение работало для многострочного текста:
источник
Если вы используете Foundation 5 и Compass framework, вы можете попробовать это.
.Sass ввод
выход .css
источник
Получил это со страницы YouTube, которая имеет очень простую настройку. Абсолютно ремонтопригодный и многоразовый.
источник
Некоторые решения здесь не сработали для меня в маленьких кругах. Поэтому я сделал это решение, используя абсолютную позицию.
Использование SASS будет выглядеть так:
И может быть использован как
Смотрите демонстрацию на https://codepen.io/matheusrufca/project/editor/DnYPMK
Смотрите фрагмент для просмотра выходного CSS
Показать фрагмент кода
источник
Один из способов сделать это - использовать flexbox для выравнивания текста по центру. Я нашел способ сделать это следующим образом:
HTML:
CSS:
Вот plnkr: https://plnkr.co/edit/EvWYLNfTb1B7igoc3TZx?p=preview
источник
Используя этот код, он также будет отзывчивым.
источник
источник
Я совмещал некоторые ответы от других людей и с,
float
иrelative
это дало мне результат, который мне был нужен.В HTML я использую div. Я использую его внутри
li
для панели навигации.источник