Centrar vertical y horizontalmente el texto en círculo en CSS (como la insignia de notificación de iphone)

Question

Estoy buscando una forma de hacer una insignia de navegador entre iPhone en CSS3. Obviamente, me gustaría usar un div para esto, pero las soluciones alternativas estarían bien. El factor importante es que debe estar centrado horizontal y verticalmente en todos los navegadores.

Un problema de diseño interesante acerca de estas notificaciones es que no pueden tener un ancho especificado (la altura es fija) - deberían poder manejar [en ascii drawing] (1) y (1000), donde (1000) no es un círculo perfectamente redondeado, pero en su lugar se parece más a una cápsula.

EDITAR: restricciones adicionales (de Steven):

• No JavaScript
• Sin mangling de la propiedad de presentación a-celda de la tabla, que es del estado de compatibilidad dudosa

Answer 1

El centrado horizontal es fácil: text-align: center;. El centrado vertical del texto dentro de un elemento se puede hacer configurando line-height igual a la altura del contenedor, pero esto tiene sutiles diferencias entre los navegadores. En elementos pequeños, como una insignia de notificación, estos son más pronunciados.

Mejor es configurar line-height igual a font-size (o un poco más pequeño) y usar relleno. Tendrás que ajustar tu altura para acomodar.

Aquí hay una solución única de CSS <div> que se ve bastante similar a un iPhone. Se expanden con contenido.

Demostración: http://jsfiddle.net/ThinkingStiff/mLW47/

Salida:

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

Interesante ¡pregunta! Si bien hay un montón de guías centrando horizontal y verticalmente un div, un tratamiento autoritario del sujeto donde el div centrado es de un ancho indeterminado brilla por su ausencia.

Vamos a aplicar algunas restricciones básicas:

• No JavaScript
• Sin mangling de la propiedad de presentación a table-cell, que es del estado de compatibilidad dudosa

Ante esto, mi entrada en la refriega es el uso de la propiedad de visualización inline-block para centrar horizontalmente el tramo dentro de un div absolutamente posicionado de altura predeterminada, centrado verticalmente dentro del contenedor primario en el tradicional top: 50%; margin-top: -123px moda.

de marcado: 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; } 

Fuente: http://jsfiddle.net/38EFb/

---

Una solución alternativa que no requiere marcas extrañas, pero que muy seguramente produce más problemas de los que resuelve es usar la propiedad de altura de línea. No hagas esto Pero se incluye aquí como una nota académica: http://jsfiddle.net/gucwW/

Answer 3

Excell ent alternativa:

Demostración: http://www.codebasehero.com/files/notification-menu/demo/index.html

Descargar & Doc: http://www.codebasehero.com/2011/07/jquery-notification-menu/

Answer 4

Si tiene contenido con la altura desconocida, pero se sabe la altura de la maceta. La siguiente solución funciona extremadamente bien.

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

Ejemplo http://jsfiddle.net/thenewconfection/eYtVN/

Uno de gotcha para Newby de mostrar: inline-block; [span] y [p] no tienen espacio en blanco html para que el lapso no ocupe ningún espacio. También he agregado en el hack CSS para mostrar en línea bloque para IE. ¡Espero que esto ayude a alguien!

Answer 5

Lamento hacer de esto una respuesta, pero soy un novato y no entiendo cómo comentar en el lugar correcto en la respuesta que estoy comentando. De todos modos: la respuesta de Richard Herries tiene un defecto.

No creo que sea un caso de uso excepcional querer centrar una "x" grande en un div para que sirva como una caja cerrada. Pero cuando el tamaño de la fuente se acerca a las dimensiones div, no se centra verticalmente en Safari, y muy visiblemente tiene más espacio en la parte superior que en la inferior.

.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> 

Demostración: http://jsfiddle.net/5WQXF/

Answer 6

Aquí está un ejemplo de placas planas que juegan bien con el marco css fundación ZURB
Nota: es posible que tenga que ajustar la altura para diferentes tipos de letra.

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

La salsa de magia!

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