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

Question

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

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

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

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

Answer 1

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

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

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

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

Выход:

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> 

Answer 2

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

Давайте применим некоторые основные ограничения:

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

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

Markup: 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/

Answer 3

Excell лор альтернатива:

Демо: http://www.codebasehero.com/files/notification-menu/demo/index.html

Скачать & Doc: http://www.codebasehero.com/2011/07/jquery-notification-menu/

Answer 4

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

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 для отображения: встроенный блок; [span] и [p] не имеют пробелов html, так что диапазон тогда не занимает места. Также я добавил в CSS хак для отображения встроенного блока для IE. Надеюсь, это поможет кому-то!

Answer 5

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

Я не думаю, что это исключительный случай использования, чтобы сосредоточить большой «х» в 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/

Answer 6

Вот пример плоских значков, которые хорошо играют с рамки CSS zurb фундаментной
Примечание: Вы, возможно, придется регулировать высоту для различных шрифтов.

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; 
}