Я хотел бы окружить число в круг, как на этом изображении:
Возможно ли это и как это достигается?
html
css
css-shapes
Pentium10
источник
источник
Проблема с большинством других ответов здесь заключается в том, что вам нужно настроить размер внешнего контейнера так, чтобы он был идеальным размером в зависимости от размера шрифта и количества отображаемых символов. Если вы смешиваете однозначные и четырехзначные числа, это не сработает. Если соотношение между размером шрифта и размером круга не является идеальным, вы получите либо овал, либо небольшое число, вертикально выровненное в верхней части большого круга. Это должно хорошо работать для любого количества текста и любого размера круга. Просто установите
width
иline-height
то же значение:Если вам нужно сделать контент длиннее или короче, все, что вам нужно сделать, это отрегулировать ширину контейнера для лучшего соответствия.
Смотрите это на JSFiddle .
источник
text-align
иline-height
к div. Все еще лучший ответ, вероятно.Если это 20 и ниже, вы можете просто использовать символы Юникода ① ② ... ⑳
http://www.alanwood.net/unicode/enclosed_alphanumerics.html
источник
Для размеров круга, варьирующихся в зависимости от содержания, это должно работать:
http://jsfiddle.net/nzsnw55s/
Он полагается на ширину содержимого плюс
margin-
's', чтобы определить радиус, а затем увеличивает высоту, чтобы соответствоватьpadding-
's. Этоmargin-
должно быть скорректировано в зависимости от размера шрифта.Обновление для удаления внутреннего элемента:
Использует псевдо-элементы для увеличения высоты. Нужно пространство нулевой ширины для вертикального выравнивания. Перемещен
line-height:0px
из внешнего в псевдо, чтобы он был хотя бы видим при деградации для IE8.источник
Самый простой способ - использовать класс начальной загрузки и значок
источник
Эта версия не опирается на жестко закодированными, фиксированные значения , но размеры по отношению к
font-size
изdiv
.http://jsfiddle.net/qod1vstv/
CSS:
HTML:
источник
Вы можете использовать border-radius для этого:
Поиграйте с радиусом границы и значениями заполнения, пока вы не будете удовлетворены результатом.
Но это не будет работать во всех браузерах. Я думаю, что IE до сих пор не поддерживает закругленные углы.
источник
Мое решение здесь - это легко учитывает различные размеры и цвета и связывает в CMS для редакционного контроля. Для IE разложение на квадраты.
HTML :
CSS :
Нетрудно понять, как это сделать. Больший вопрос заключается в том, можно ли сделать размеры круга масштабируемыми до содержания.
В настоящее время я не думаю, что это возможно. Кто угодно?
источник
Поздно на вечеринку, но вот решение только для начальной загрузки, которое сработало для меня. Я использую Bootstrap 4:
Вы в основном добавляете
bg-dark text-white rounded-circle px-3 py-1 mx-2 h3
классы к своему<span>
(или какому-либо другому) элементу, и все готово.Обратите внимание, что вам может потребоваться настроить поля margin и padding, если ваш контент содержит более одной цифры.
источник
Вы работаете как со стандартным блоком, то есть квадрат
Это особенность CSS 3, и она не очень хорошо поддерживается, вы точно можете рассчитывать на Firefox и Safari.
источник
Пример HTML
КОД
источник
Поздно на вечеринку, но вот решение, с которым я пошел https://codepen.io/jnbruno/pen/vNpPpW
Css:
HTML:
Требуется без дополнительной работы. Спасибо Джон Ноэль Бруно
источник
Сделайте что-то подобное в вашем CSS
Используйте тег абзаца, чтобы написать текст. надеюсь, это поможет
источник
Может сработать что-то вроде того, что я здесь сделал (для чисел от 0 до 99):
CSS:
HTML:
источник
Улучшение первого ответа просто избавиться от дополнения и дополнения
line-height
иvertical-align
:источник
Вот мой способ сделать это, используя квадратный метод. плюс это работает с разными значениями, но вам нужно 2 пролета.
источник
Ответ Тридцати является правильным, но в нем не хватает небольшого смысла. Вам нужно добавить position: относительный , если вы хотите, чтобы центрированное значение было в круге, а также включать другой диапазон чисел. Например 123;
HTML:
CSS:
но самое простое решение - использовать Bootstrap
<span class="badge" style ="float:right">123</span>
источник