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

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

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

EDIT: дополнительные ограничения (от Steven):

  • Нет JavaScript
  • Отсутствие свойства отображения для таблицы-ячейки, что вызывает сомнительный статус поддержки

ОТВЕТЫ

Ответ 1

Горизонтальное центрирование легко: text-align: center;. Вертикальное центрирование текста внутри элемента можно сделать, установив line-height равным высоте контейнера, но это имеет тонкие различия между браузерами. На небольших элементах, как значок оповещения, они более выражены.

Лучше установить line-height равный font-size (или немного меньше) и использовать отступы. Вам нужно будет отрегулировать высоту для размещения.

Вот только CSS-единственное, единственное <div> решение, которое выглядит довольно похоже на iPhone. Они расширяются с контентом.

Демо: http://jsfiddle.net/ThinkingStiff/mLW47/

Вывод:

enter image description here

CSS

.badge {
    background: radial-gradient( 5px -9px, circle, white 8%, red 26px );
    background-color: red;
    border: 2px solid white;
    border-radius: 12px; /* one half of ( (border * 2) + height + padding ) */
    box-shadow: 1px 1px 1px black;
    color: white;
    font: bold 15px/13px Helvetica, Verdana, Tahoma;
    height: 16px; 
    min-width: 14px;
    padding: 4px 3px 0 3px;
    text-align: center;
}

HTML:

<div class="badge">1</div>
<div class="badge">2</div>
<div class="badge">3</div>
<div class="badge">44</div>
<div class="badge">55</div>
<div class="badge">666</div>
<div class="badge">777</div>
<div class="badge">8888</div>
<div class="badge">9999</div>

Ответ 2

Если у вас есть контент с неизвестной высотой, но вы знаете высоту контейнера. Следующее решение работает очень хорошо.

HTML

<div class="center-test">
    <span></span><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
    Nesciunt obcaecati maiores nulla praesentium amet explicabo ex iste asperiores 
    nisi porro sequi eaque rerum necessitatibus molestias architecto eum velit 
    recusandae ratione.</p>
</div>

CSS

.center-test { 
   width: 300px; 
   height: 300px; 
   text-align: 
   center; 
   background-color: #333; 
}
.center-test span { 
   height: 300px; 
   display: inline-block; 
   zoom: 1; 
   *display: inline; 
   vertical-align: middle; 
 }
.center-test p { 
   display: inline-block; 
   zoom: 1; 
   *display: inline; 
   vertical-align: middle; 
   color: #fff; 
 }

Пример http://jsfiddle.net/thenewconfection/eYtVN/

Один способ получения newby для отображения: inline-block; [span] и [p] не имеют пробелов html, так что диапазон тогда не занимает места. Также я добавил в CSS хак для отображения встроенного блока для IE. Надеюсь, это поможет кому-то!

Ответ 3

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

Пусть применяются некоторые основные ограничения:

  • Нет Javascript
  • Невозможно изменить свойство отображения на table-cell, что вызывает сомнительный статус поддержки.

Учитывая это, мой вход в битву - использование свойства отображения inline-block для горизонтального центрирования диапазона в абсолютно позиционированном div заданной высоты, вертикально центрированном в родительском контейнере традиционным способом top: 50%; margin-top: -123px.

Разметка: div > div > span

CSS

body > div { position: relative; height: XYZ; width: XYZ; }
div > div { 
  position: absolute;
  top: 50%;
  height: 30px;
  margin-top: -15px; 
  text-align: center;}
div > span { display: inline-block; }

Источник: http://jsfiddle.net/38EFb/

Альтернативное решение, которое не требует посторонних разметок, но, скорее всего, создает больше проблем, чем решает, использовать свойство line-height. Не делай этого. Но здесь он включен в качестве академической заметки: http://jsfiddle.net/gucwW/

Ответ 4

Вот пример плоских значков, которые хорошо сочетаются с базой css для фундамента css

Примечание. Возможно, вам придется настроить высоту для разных шрифтов.

http://jsfiddle.net/jamesharrington/xqr5nx1o/

Волшебный соус!

.label {
  background:#EA2626;
  display:inline-block;
  border-radius: 12px;
  color: white;
  font-weight: bold;
  height: 17px; 
  padding: 2px 3px 2px 3px;
  text-align: center;
  min-width: 16px;
}

Ответ 6

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

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

.center-test { width: 30px; height: 30px; text-align: center; background-color: #333; }
.center-test span { height: 30px; display: inline-block; zoom: 1; *display: inline; vertical-align: middle; }
.center-test p { display: inline-block; zoom: 1; *display: inline; vertical-align: middle; color: #fff; font-size:30px;}

<div class="center-test">
    <span></span><p>X</p>
</div>

Демонстрация: http://jsfiddle.net/5WQXF/