Centrage vertical et horizontal du texte en cercle en CSS (comme le badge de notification iphone)

Je cherche un moyen de faire un badge iphone-like multi-navigateur en CSS3. Je voudrais évidemment utiliser un div pour cela, mais des solutions alternatives seraient bien. Le facteur important est qu’il doit être centré horizontalement et verticalement dans tous les navigateurs.

Un problème de conception intéressant concernant ces notifications est qu’elles ne peuvent pas avoir une largeur spécifiée (la hauteur est fixe) – elles doivent pouvoir gérer [en dessin ascii] (1) et (1000), où (1000) n’est pas un cercle parfaitement arrondi , mais ressemble plutôt à une capsule.

EDIT : Contraintes supplémentaires (de Steven):

  • Pas de JavaScript
  • Aucun gabarit de la propriété d’affichage sur la table-cell, qui présente un état de support douteux

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

Mieux vaut définir une line-height égale à font-size de la font-size (ou légèrement inférieure) et utiliser un remplissage. Vous devrez ajuster votre taille pour accueillir.

Voici une solution CSS unique, unique

qui ressemble à un iPhone. Ils développent avec le contenu.

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

Sortie:

entrer la description de l'image ici

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:

 
1
2
3
44
55
666
777
8888
9999

Si vous avez du contenu dont la hauteur est inconnue, vous connaissez la hauteur du conteneur. La solution suivante fonctionne extrêmement bien.

HTML

 

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.

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 getcha pour que newby’s affiche: inline-block; [span] et [p] n’ont pas d’espace blanc en html, de sorte que l’intervalle ne prend aucun espace. J’ai aussi ajouté dans le hack CSS pour afficher le bloc en ligne pour IE. J’espère que cela aide quelqu’un!

Question interessante! Bien qu’il existe de nombreux guides sur le centrage horizontal et vertical d’un div, un traitement autoritaire du sujet dont la div centrée est d’une largeur non prédéterminée est manifestement absent.

Appliquons des contraintes de base:

  • Pas de Javascript
  • Aucun gabarit de la propriété d’affichage sur la table-cell , qui présente un état de support 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 travée à l’intérieur d’une division de hauteur prédéterminée, centrée à l’intérieur du conteneur parent dans le top: 50%; margin-top: -123px traditionnel top: 50%; margin-top: -123px top: 50%; margin-top: -123px fashion.

Balisage: 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 solution alternative qui ne nécessite pas de balisages superflus mais qui produit très probablement plus de problèmes qu’il n’en résout est d’utiliser la propriété line-height. Ne fais pas ça. Mais il est inclus ici comme une note académique: http://jsfiddle.net/gucwW/

Voici un exemple de badge plat qui fonctionne bien avec zurb foundation css framework
Remarque: vous devrez peut-être ajuster la hauteur des différentes fonts.

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