imagenes - Centrar horizontal y verticalmente el texto en círculo en CSS(como la insignia de notificación de iphone)

centrar formulario css

Question

Estoy buscando una forma de hacer una insignia de navegador similar a un 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 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 su lugar se parece más a una cápsula.

EDITAR : Restricciones adicionales (de Steven):

• Sin JavaScript
• Sin alterar la propiedad de visualización a la celda de tabla, que es de estado de soporte cuestionable

Answer 1

¡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:

• Sin Javascript
• Sin alterar la propiedad de visualización a table-cell , que es de estado de soporte cuestionable

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

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 márgenes extraños pero que muy probablemente produzca más problemas de los que soluciona es usar la propiedad de altura de línea. No hagas esto Pero está incluido aquí como nota académica: http://jsfiddle.net/gucwW/

Answer 2

Aquí hay un ejemplo de insignias planas que funcionan bien con zurb foundation css framework
Nota: puede que tenga que 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;
}

Answer 3

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

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

Una gotcha para newby''s para 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 4

El centrado horizontal es fácil: text-align: center; . El centrado vertical del texto dentro de un elemento se puede hacer estableciendo 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 al font-size (o un poco más pequeño) y usar el relleno. Tendrás que ajustar tu altura para acomodar.

Aquí hay una única solución 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>