Centrer un bouton css dans une div
Résolu
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
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
11 réponses
-
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 :
CSSa.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
