Centrer verticalement et horizontalement le texte dans un cercle en CSS (comme le badge de notification de l'iphone)

Question

Je suis à la recherche d'un moyen de faire un badge de type iphone en CSS3. J'aimerais évidemment utiliser un div pour cela, mais d'autres solutions seraient acceptables. 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 devraient être capables de gérer [en dessin ascii] (1) et (1000), où (1000) n'est pas un cercle parfaitement arrondi, mais ressemble plutôt à une capsule.

EDITAR : Contraintes supplémentaires (de Steven) :

• Pas de JavaScript
• Pas de manipulation de la propriété d'affichage de table-cell, dont le statut de soutien est douteux.

Answer 1

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 les paramètres suivants line-height égale à la hauteur du conteneur, mais cela présente des différences subtiles entre les navigateurs. Sur les petits éléments, comme un badge de notification, ces différences sont plus prononcées.

Le mieux est de définir line-height égal à font-size (ou légèrement plus petit) et utiliser le rembourrage. Vous devrez ajuster votre hauteur pour vous adapter.

Voici un modèle unique en CSS <div> qui ressemble beaucoup à un iPhone. Ils s'étendent avec le contenu.

Démonstration : 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 un contenu dont la hauteur est inconnue mais que vous connaissez la hauteur du conteneur. 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/

Une astuce pour les novices : display : inline-block ; [span] et [p] n'ont pas d'espace blanc html afin que le span ne prenne pas de place. J'ai également ajouté le hack CSS pour display inline-block pour IE. J'espère que cela aidera quelqu'un !

Answer 3

Question intéressante ! Bien qu'il existe de nombreux guides sur le centrage horizontal et vertical d'une div, il n'existe aucun traitement faisant autorité sur le sujet lorsque la div centrée est d'une largeur non prédéterminée.

Appliquons quelques contraintes de base :

• Pas de Javascript
• Pas de manipulation de la propriété d'affichage pour table-cell qui est d'un statut de soutien douteux

Compte tenu de ce qui précède, je me lance dans la bataille en utilisant l'outil d'évaluation de la qualité de l'eau. inline-block pour centrer horizontalement le span dans un div positionné de manière absolue et d'une hauteur prédéterminée, centré verticalement dans le conteneur parent en mode traditionnel. top: 50%; margin-top: -123px la mode.

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 de balises superflues mais qui risque fort de créer plus de problèmes qu'elle n'en résout, consiste à utiliser la propriété line-height. Ne faites pas cela. Mais elle est incluse ici à titre d'information : http://jsfiddle.net/gucwW/

Answer 4

Excellente alternative :

Démonstration : http://www.codebasehero.com/files/notification-menu/demo/index.html

Télécharger & Doc : http://www.codebasehero.com/2011/07/jquery-notification-menu/

Answer 5

Désolé de faire de cette réponse sa propre réponse, mais je suis un débutant et je n'arrive pas à trouver comment commenter au bon endroit sous la réponse que je commente. Quoi qu'il en soit : La réponse de Richard Herries a une faille.

Je ne pense pas que ce soit un cas d'utilisation exceptionnel que de vouloir centrer un grand "x" dans un div pour servir de boîte de fermeture. Mais lorsque la taille de la police est proche des dimensions de la division, elle ne se centre pas verticalement dans Safari et présente visiblement plus d'espace en haut qu'en bas.

.center-test { width: 30px; height: 30px; text-align: center; background-color: #333; }
.center-test span { height: 30px; 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; font-size:30px;}

<div class="center-test">
    <span></span><p>X</p>
</div>

Démonstration : http://jsfiddle.net/5WQXF/