Verticalmente e orizzontalmente centratura testo in cerchio in CSS (come distintivo di notifica iphone)

Question

Sto cercando un modo di fare un cross-browser iPhone-like distintivo in CSS3. Mi piacerebbe, ovviamente, come di utilizzare uno div per questo, ma le soluzioni alternative andrebbe bene. Il fattore importante è che deve essere orizzontale e verticale centrata in tutti i browser.

Un problema di progettazione interessante di queste notifiche è che essi non possono avere una larghezza specificata (altezza è fissa) - dovrebbero essere in grado di gestire [in disegno ascii] (1) e (1000), dove (1000) non è un perfettamente cerchio arrotondato, ma invece sembra più una capsula.

Modifica : vincoli supplementari (da Steven):

• Nessun JavaScript
• Nessun pressare della proprietà display per table-cell, che è stato di supporto di discutibile

Answer 1

centratura orizzontale è facile: text-align: center;. centratura verticale del testo all'interno di un elemento può essere fatto impostando line-height pari all'altezza contenitore, ma questo ha sottili differenze tra i browser. Su piccoli elementi, come un badge di notifica, questi sono più pronunciate.

Una migliore è quella di impostare line-height pari a font-size (o leggermente più piccola) e l'uso imbottitura. Dovrete regolare l'altezza per accogliere.

Ecco un CSS-only, soluzione single <div> che sembra piuttosto iPhone-like. Si espandono con il contenuto.

Demo: http://jsfiddle.net/ThinkingStiff/mLW47/

Output:

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

Se si dispone di contenuti con l'altezza sconosciuto, ma si conosce l'altezza del del contenitore. La seguente soluzione funziona molto bene.

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

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

Una Gotcha per Newby è a display: inline-block; [Arco] e [p] non hanno alcun spazio bianco HTML in modo che la durata quindi non occupa alcuno spazio. Inoltre ho aggiunto nel l'hack CSS per la visualizzazione inline-block per IE. Spero che questo aiuti qualcuno!

Answer 3

Domanda interessante! Mentre ci sono molte guide su orizzontalmente e verticalmente centraggio un div, un trattamento autorevole del soggetto in cui l'div centrata è di larghezza unpredetermined è assente.

Proviamo ad applicare alcuni vincoli fondamentali:

• Nessun JavaScript
• Nessun pressare della proprietà display per table-cell, che è stato di supporto di discutibile

Detto questo, il mio ingresso nella mischia è l'utilizzo della proprietà di visualizzazione inline-block orizzontalmente centrare l'arco all'interno di un div posizionato in modo assoluto di prefissata altezza, centrato verticalmente all'interno del contenitore principale in maniera tradizionale 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; }

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

---

Una soluzione alternativa che non richiede marcature estranei ma che molto probabilmente produce più problemi di quanti ne risolva è quello di utilizzare la proprietà line-height. Non fare questo. Ma è incluso qui come una nota accademica: http://jsfiddle.net/gucwW/

Answer 4

Ecco un esempio di badge piatti che giocano bene con ZURB fondazione quadro css
Nota:. Potrebbe essere necessario regolare l'altezza per i diversi tipi di carattere

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

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