Вертикальное и горизонтальное центрирование текста по кругу в CSS (например, значок уведомления iphone)

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

Интересная проблема дизайна этих уведомлений заключается в том, что они не могут иметь заданную ширину (высота фиксирована) - они должны иметь возможность обрабатывать [на чертеже ascii] (1) и (1000), где (1000) не является идеально округлый круг, но вместо этого больше похож на капсулу.

РЕДАКТИРОВАТЬ : Дополнительные ограничения (от Стивена):

  • Нет JavaScript
  • Нет искажения свойства отображения в ячейку таблицы, что имеет сомнительный статус поддержки
]
53
задан Alexander Farber 12 September 2015 в 07:10
поделиться