Verticalement et le texte de centrage horizontalement dans le cercle en CSS (comme un badge de notification iphone)

Question

Je cherche une façon de faire un iphone-like badge CSS3 cross-browser. Je serais évidemment comme d'utiliser un div pour cela, mais des solutions de rechange sont très bien. Le facteur important est qu'il doit être centré horizontalement et verticalement dans tous les navigateurs.

Un problème de conception intéressante au sujet de ces notifications est qu'ils ne peuvent pas avoir une largeur spécifiée (hauteur est fixe) - ils devraient être en mesure de traiter [dans le dessin ascii] (1) et (1000), où (1000) n'est pas un cercle parfaitement arrondi, mais il semble plutôt plus comme une capsule.

EDIT : contraintes supplémentaires (de Steven):

• Pas de JavaScript
• Pas de mutiler de la propriété d'affichage à la table des cellules, ce qui est de l'état de soutien douteux

Answer 1

Le centrage horizontal est facile: text-align: center;. centrage vertical du texte à l'intérieur d'un élément peut être fait en réglant line-height égale à la hauteur du conteneur, mais cela a des différences subtiles entre les navigateurs. Sur les petits éléments, comme un badge de notification, ceux-ci sont plus prononcées.

Mieux est de mettre en line-height égale à font-size (ou légèrement inférieur) et le rembourrage d'utilisation. Vous devrez ajuster votre taille pour accueillir.

Voici une CSS seule, seule solution <div> qui semble assez semblable au iPhone. Ils se dilatent avec le contenu.

Démo: http://jsfiddle.net/ThinkingStiff/mLW47/

Sortie:

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 vous avez du contenu avec inconnu hauteur, mais vous savez la hauteur du récipient de. La solution suivante fonctionne très 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; 
 }

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

Un Gotcha Newby est à afficher: inline-block; [Durée] et [p] ont pas d'espace html pour que la durée ne puis prend pas tout l'espace. Aussi j'ai ajouté dans le hack CSS pour l'affichage inline-block pour IE. Espérons que cela aide quelqu'un!

Answer 3

Question intéressante! Bien qu'il ya beaucoup de guides sur le centrage horizontalement et verticalement une div, un traitement faisant autorité du sujet où le div centré est d'une largeur unpredetermined brille par son absence.

Appliquons certaines contraintes de base:

• Non Javascript
• Pas de mutiler de la propriété d'affichage à table-cell, qui est de l'état de soutien douteux

Compte tenu de cela, mon entrée dans la mêlée est l'utilisation de la propriété d'affichage de inline-block pour centrer horizontalement la durée au sein d'un div en position absolue de hauteur prédéterminée, verticalement centré à l'intérieur du conteneur parent dans le mode de top: 50%; margin-top: -123px traditionnel.

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

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

---

Une autre solution qui ne nécessite pas étrangers mais marges produit très probablement plus de problèmes qu'elle permet de résoudre est d'utiliser la propriété line-height. Ne pas faire cela. Mais il est inclus ici une note académique: http://jsfiddle.net/gucwW/

Answer 4

Voici un exemple de badges plats qui jouent bien au fond de teint Zurb cadre
css . Remarque: vous devrez peut-être ajuster la hauteur des polices différentes

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

La sauce magique!

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