[Résolu] Aligner verticalement un texte dans un bouton (avec lien)

Bonjour à tous,

Ceci est mon premier message et je tiens donc a féliciter toute la communauté participante auprès de laquelle, j'ai parfois trouvé certaine réponse.

Je vous expose mon problème après avoir essayé seul de m'en sortir, après avoir aussi consulté certains topic sur ce forum mais certaines reponses que j'ai lu concernant des boutons avec comme valeur "input" et non pas un lien <a href>.

Je vous avouerai aussi que mes connaissances sont assez limitées en CSS, meme si par tenacité et par deduction je m'en suis sorti jusqu'a là.

J'ai crée 2 boutons avec en fond une image en background, ces 2 boutons sont en fait des liens : le probleme est que je n'arrive pas a centrer verticalement mon texte sur ces 2 boutons.Le "vertical-align" ne marche pas et j'ai cru comprendre que de toute facon il ne s'appliquait pas à tous les elements.

Voici le code HTML :

<div align="center">

<a style="color: rgb(255, 255, 255);" class="continue_link" href="/joomlaTest/index.php?page=shop.browse&amp;category_id=7&amp;option=com_virtuemart&amp;Itemid=1">Continuer mes achats </a>

<a style="color: rgb(255, 255, 255);" class="checkout_link" title="Passer ma commande " href="http://localhost joomlaTestindex.php?page=checkout.index&amp;ssl_redirect=1&amp;option=com_virtuemart&amp;Itemid=1">Passer ma commande </a>

</div>

Et le CSS :

.continue_link, .checkout_link {
background: url( 'images/bouton_paniergene1.png' ) no-repeat ;
color: #fff;
text-align: center;
padding: 10px 9px 10px 9px;
margin: 15px;
vertical-align: middle;
font-weight: bold;
font-size: 12px;
width: 135px;

Je voulais joindre une photo mais le pop-up qui s'ouvre m'indique que je dois etre identifié, peut-etre le fait que cela soit mon premier message.Je réessaye apres avoir ouvert la discussion, si c'est possible.

Je vous remercie par avance de votre aide precieuse, car là j'avoue je craque !!

Bonne journée a tous
Modifié par paul66 (22 Jul 2010 - 12:39)

Bonjour BeliG

Merci pour ton aide, j'essaie cela rapidement et poste le résultat;

C'est bon, je pense pouvoir posté une capture des images pour plus de clarté de mon probleme :

Aie aie aie, le resultat n'est pas vraiment celui escompté : mes 2 boutons sont dorenavant l'un au dessus de l'autre.Voir capture

Une question: as-tu modifié quelquechose dans le code HTML car je ne comprends pas ce sigle : " # " dans <a href="#" class="checkout_link">Passer ma commande</a>

Je peux voir le code complet que tu as utilisé ?

Si tu as gardé le padding c'est normal que le texte se place n'importe où, limite-toi à ce que je t'ai donné (fais juste un c/c).

De plus, c'est normal que les éléments se mettent les uns en dessous des autres (voir le lien que je t'ai donné dans mon premier message).

Pour les aligner côte à côte il y a plusieurs solutions (au choix) :
- Utiliser les flottants (ajouter un float:left) + technique pour éviter que les éléments ne dépassent du parent (si besoin).
- Utiliser du display:inline-block à la place de display:block (plus d'infos).

Et le "#" signifie juste une URL vide, c'était pour alléger le code de mon exemple.

Merci BeliG pour ta reactivité.Voici le code CSS que j'ai utilisé, c'est juste j'avais gardé le padding :

.continue_link, .checkout_link {
background: url( 'images/bouton_paniergene1.png' ) no-repeat ;
color: #fff;
text-align: center;
padding: 10px 9px 10px 9px;
margin: 15px;
font-weight: bold;
font-size: 12px;
display: block;
width: 137px;
height: 24px;
line-height: 24px;
}

Et maintenant le resulat en faisant un c/c de ton code, le texte est bien centré (il y a deja du mieux !!!) mais les 2 boutons sont toujours l'un sur l'autre :




Super avec le display : inline-block, c'est tout bon, j'ai rajouté un margin: 15px et voila le resultat, exactement ce que je desirais :




Un grand merci a toi, Belig, je vais lire la doc que tu m'as conseillé et j'aurais appris encore un peu plus aujourd'hui.

Bonne journée

[Résolu] ?

Attention toutefois à l'utilisation de display:inline-block, si tu développes pour IE6 tu devras mettre en place un petit correctif (que tu trouveras dans le lien que je t'ai donné). Pour IE7 normalement pas besoin, la propriété fonctionne bien sur les éléments nativement "en-ligne".

Bonne continuation.

Testé sous IE8 et F3.6, aucun souci mais comme tout le monde n'est pas encore sous IE8, je vais lire les docs que tu me proposes et passé le post en reglé (dans l'euphorie, j'avais zappé !!!).

Encore merci