Centrer le texte avec CSS fond « forme »

Je suis en train de créer un lien « annuler » qui ressemble à un x avec un cercle rouge solide derrière.Centrer le texte avec CSS fond « forme »

Voici le CSS:

.circle { 
    display:inline; 
    padding-left:4px; 
    padding-right:4px; 
    background:rgb(196,15,24); 
    -moz-border-radius:10px; 
    -webkit-border-radius:10px; 
} 

.circle a { 
    font-size:10px; 
    text-decoration:none; 
    color:#fff; 
}

Voici le code HTML:

<div class='circle'> 
    <a href="">x</a> 
</div>

Il finit par ressembler à ceci: alt text http://www.freeimagehosting.net/uploads/472563dfe4.png.

Comment déplacer x afin qu'il soit au centre du cercle? Modification du margin-top ou bottom ne semble pas fonctionner ...

Source

2010-05-26 user5243421

Si vous placez votre relativement une étiquette, vous pouvez le fixer:

.circle a { 
    font-size:10px; 
    text-decoration:none; 
    color:#fff; 

    position:relative; top:-2px; 
}

Régler la valeur top à votre goût.

Source

2010-05-26 19:10:44 mVChr

Peut-être padding-bottom ferait l'affaire ici aussi, mais je sais que Internet Explorer est (ou a été) pointilleux sur vertical rembourrages sur les éléments en ligne (il affleure substance qui se prolonge au-delà de la hauteur de ligne). –

Votre police doit accueillir des caractères comme É, q, X et X, etc et toujours être affiché sur fond quelle que soit la hauteur du personnage.

Je trouve que l'utilisation d'un X (ou text-transform: uppercase; évidemment) et font-family: monospace; une amélioration avec votre code, mais pas parfait. Solution fournie par mh est utile, même avec une police à espacement fixe.

Source

2010-05-26 19:41:44 FelipeAls

Je suis en train de faire quelque chose de similaire, et en utilisant ce qui suit pour centrer mon texte:

text-align: center; 
margin: auto; 
position: relative;

Source

2010-11-17 19:08:02

Centrer le texte avec CSS fond « forme »

Répondre

Questions connexes