Centrer un bouton css dans une div

Résolu/Fermé
Séb41100 - 17 déc. 2013 à 11:59
uniuc Messages postés 156 Date d'inscription samedi 23 juin 2007 Statut Membre Dernière intervention 18 mai 2019 - 18 déc. 2013 à 16:53
Bonjour à tous

voila je bloque la dessus depuis déjà longtemps et je ne suis pas encore très doué surtout au niveau css

j'ai un bouton CSS placé dans une div qu'il m'est impossible de changer

Sachant que j'ai repris le CSS utilisé pour les boutons du menu de mon site .

voila mon html :

<div class="bouton">
<p><a href="services.html"><b >Retour Menu</b></a></p>
</div>

et le Css :

p{
font-family: Arial,sans-serif;
font-size: medium;
width: 200px;
height: 43px;
padding-top: 7px;
color: #000;
background: transparent;
}
.bouton a {
text-align: center;
font-size: medium;
display:block;
width:210px;
line-height:50px;
vertical-align:middle;
background:url(images/boutonnoir.png) no-repeat;
color:white;
text-decoration:none;
}
.bouton a:hover {
background:url(images/boutonnoir2.png) no-repeat;
color: #000;
}

Merci de votre aide

A voir également:

11 réponses

Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 545
Modifié par Pitet le 17/12/2013 à 14:27
Salut,

Pour commencer, tu appliques ton style à la balise <p>, donc tous les paragraphes de ta page feront 200px de largeur. Je ne pense pas que c'est ce que tu souhaites.

Pour faire au plus simple, pas besoin d'utiliser autant de balise pour encapsuler ton lien, seule la balise <a> suffit. Par exemple :

CSS
a.mybutton {
 /* display et dimensions */
 display: inline-block;
 width: 200px;
 height: 50px;
 /* centrage vertical */
 line-height: 50px;
 vertical-align: middle;
 /* centrage horizontal */
 text-align: center;
 /* font style */
 font-family: Arial,sans-serif;
 font-size: medium; 
 color: white;
 text-decoration: none;
 font-weight: bold;
 /* background style */
 background: blue;
}

a.mybutton:hover { background: red; color: black; }


HTML
<a href="services.html" class="mybutton">Retour Menu</a>


N'ayant pas tes images, j'ai remplacé les background par une couleur.

Bonne journée
6