web-dev-qa-db-fra.com

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

Je cherche un moyen de créer un badge ressemblant à un iphone avec plusieurs navigateurs en CSS3. Je voudrais évidemment utiliser une 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 à propos de ces notifications est qu’elles ne peuvent pas avoir une largeur spécifiée (la hauteur est fixée) - elles devraient pouvoir gérer [en dessin ascii] (1) et (1000), où (1000) n’est pas un cercle parfaitement arrondi , mais au lieu de cela ressemble plus à une capsule.

EDIT : Contraintes supplémentaires (de Steven):

  • Pas de JavaScript
  • Pas de modification de la propriété display en table-cell, dont le statut de support est discutable
csscss3cross-browsergeometrycss-shapes
52
Matt

Le centrage horizontal est facile: text-align: center;. Le centrage vertical du texte dans un élément peut être effectué en définissant line-height égal à 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, ceux-ci sont plus prononcés.

Mieux vaut régler line-height égal à font-size (ou légèrement plus petit) et utilisez un rembourrage. Vous devrez ajuster votre taille pour vous adapter.

Voici un seul CSS <div> solution qui ressemble à l'iPhone. Ils se développent avec le contenu.

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

Sortie:

enter image description here

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>
111
ThinkingStiff

Si vous avez un contenu de hauteur inconnue mais que vous connaissez la hauteur du conteneur. La solution suivante fonctionne extrêmement 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/

On a eu newby's pour afficher: inline-block; [span] et [p] n'ont pas d'espace blanc html, de sorte que l'envergure ne prend alors aucun espace. Aussi, j'ai ajouté dans le hack CSS pour l'affichage inline-block pour IE. J'espère que ça aide quelqu'un!

5
Richard Herries

Question interessante! Bien qu'il existe de nombreux guides sur le centrage horizontal et vertical d'une div, le traitement faisant autorité du sujet, lorsque la div centrée a une largeur non prédéterminée, est manifestement absent.

Appliquons quelques contraintes de base:

  • Pas de Javascript
  • Pas de modification de la propriété display en table-cell, dont le statut de support est discutable

Compte tenu de cela, mon entrée dans la mêlée est l'utilisation du inline-block propriété d’affichage permettant de centrer horizontalement la plage dans une division de hauteur prédéterminée positionnée de manière absolue, centrée verticalement dans le conteneur parent dans le cadre traditionnel top: 50%; margin-top: -123px mode.

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 autre solution qui ne nécessite pas de balises superflues mais qui génère très probablement plus de problèmes qu'elle n'en résout est l'utilisation de la propriété line-height. Ne fais pas ça. Mais il est inclus ici en tant que note académique: http://jsfiddle.net/gucwW/

3
Steven

Voici un exemple de badges plats qui fonctionnent bien avec le framework css zurb foundation
Remarque: vous devrez peut-être ajuster la hauteur de différentes polices.

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;
}
1
James Harrington