Centrante vertical y horizontalmente en el círculo en CSS (como la insignia de notificación de iPhone)

Question

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

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

EDITAR: Restricciones adicionales (de Steven):

• No JavaScript
• Ningún desglose de la propiedad de visualización a la célula de tabla, que es de cuestionable estado de soporte

Answer 1

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

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

Aquí hay un solo CSS, single <div> Solución que se ve bastante parecida a iPhone. Se expanden con contenido.

Manifestación: http://jsfiddle.net/thinkingstiff/mlw47/

Producción:

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

Si tiene contenido con altura desconocida pero conoce la altura del contenedor. 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; 
 }

EJEMPLOhttp://jsfiddle.net/thenewconfection/eytvn/

Uno Gotcha para que Newby se muestre: bloque en línea; [Span] y [P] no tienen espacio en blanco HTML para que el tramo no ocupe ningún espacio. También he agregado el Hack CSS para mostrar bloque en línea para IE. ¡Espero que esto ayude a alguien!

Answer 3

¡Interesante pregunta! Si bien hay muchas guías en centrar horizontalmente y verticalmente un DIV, un tratamiento autorizado del sujeto donde el DIV centrado es de un ancho imprevisto está notablemente ausente.

Aplicemos algunas restricciones básicas:

• No JavaScript
• Ninguna destrozada de la propiedad de visualización para table-cell, que es de cuestionable estado de soporte

Dado esto, mi entrada a la refriega es el uso de inline-block Mostrar la propiedad para centrar horizontalmente el tramo dentro de un divs absolutamente posicionado de altura predeterminada, centrada verticalmente dentro del recipiente principal en el tradicional top: 50%; margin-top: -123px Moda.

Margen: 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 marcados extraños, pero que muy probablemente 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 4

Aquí hay un ejemplo de insignias planas que juegan bien con Zurb Foundation CSS Framework
Nota: es posible que deba ajustar la altura para diferentes fuentes.

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

¡La salsa mágica!

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