Center Link utilisant la porte coulissante CSS

J'essaie de centrer l'ensemble du lien et j'ai de la difficulté à trouver une solution. J'utilise un simple style de porte coulissante pour mon lien et j'aimerais qu'il soit centré.Center Link utilisant la porte coulissante CSS

Voici une démo, vous pouvez interagir avec: http://jsbin.com/ibidu3

<style> 
    a.btn_blue { 
    background:url("http://img291.imageshack.us/img291/2600/btnblueleft.gif") no-repeat scroll left top transparent; 
    float:left; 
    text-decoration:none; 
    margin-right:4px; 
    padding-left:5px; 
    color:#fff; 
    } 

a.btn_blue span{ 
    background:url("http://img826.imageshack.us/img826/1531/btnblueright.gif") no-repeat scroll right top transparent; 
    float:left; 
    padding:6px 10px 10px 4px; 
    } 
    </style> 

<a href="#" class="btn_blue"><span>Learn More: <strong>Benefits</strong></span></a>

Source

2010-10-03 Evan

À quoi faites-vous référence par «porte coulissante»? – Ryan

@Ryan, il se réfère à l'approche CSS des arrière-plans «infiniment extensibles» (afin que le texte puisse être agrandi sans casser le design du site), il y a un article à [A List Apart] (http://www.alistapart.com/articles/slidingdoors /) qui l'explique. –

@Evan, y a-t-il une raison pour laquelle vous avez choisi d'utiliser des portes coulissantes au lieu d'utiliser 'background-colour', css-gradients,' border-radius' ...? Votre 'btn_blue' semble incroyablement fragile et persistant. –

Si vous parlez du texte ne sont pas centré dans la balise d'ancrage alors cela est dû à ppadding dans a.btn_blue span être différent à gauche et à droite. padding:6px 10px 10px 6px;

Source

2010-10-03 03:32:54

Je parle du lien étant centré d'un div. en fin de compte, le lien existera dans une "classe div". – Evan

@ votre lien de test ne l'a pas pourrait ypu mettre à jour ou au moins poster le html complet –

Center Link utilisant la porte coulissante CSS

Répondre

Questions connexes