Centrer un bouton css dans une div [Résolu/Fermé]

Signaler
-
Messages postés
156
Date d'inscription
samedi 23 juin 2007
Statut
Membre
Dernière intervention
18 mai 2019
-
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

11 réponses

Messages postés
2370
Date d'inscription
lundi 11 février 2013
Statut
Membre
Dernière intervention
10 mars 2020
430
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
Merci

Quelques mots de remerciements seront grandement appréciés. Ajouter un commentaire

CCM 60769 internautes nous ont dit merci ce mois-ci

Messages postés
2370
Date d'inscription
lundi 11 février 2013
Statut
Membre
Dernière intervention
10 mars 2020
430
Qu'est-ce qui ne marche pas ?

D'après ton image, je suppose que tu souhaites centrer le bouton par rapport au conteneur blanc. Si c'est ça, tu peux ajouter des marges auto :

a.mybutton {
    /* ...suite du code css... */
    margin: 0 auto;
}
Messages postés
156
Date d'inscription
samedi 23 juin 2007
Statut
Membre
Dernière intervention
18 mai 2019
6
je n'ai pas compris ta question, enfin j'ai du mal au pire le bouton qui te prend la tete donne lui une nouvelle ID et joue avec padding et margin

--
en faite j'ai voulu faire au plus simple en gardant le même bouton pour un lien de retour au menu principal ...

je vais essayer de lui refaire un ID ...

Merci
Merci Pitet mais ta solution ne marche pas
En prenant uniquement ton code en C/c ca donne ça :

http://i57.servimg.com/u/f57/18/31/43/74/sans_t10.png

en dessous on vois mon bouton dans ca div que je n'arrive pas à centrer

petite précision : sur Dw je le visualise bien centrer pourtant

Mais merci !
oui c'est le bute recherché

si non avec un simple

<p><center><a href="services.html"><b>Retour Menu</b></a></center></p>

ça marche ...
Messages postés
2370
Date d'inscription
lundi 11 février 2013
Statut
Membre
Dernière intervention
10 mars 2020
430
Balise <center>

Obsolète
Cette fonctionnalité a été supprimée du Web. Bien que quelques navigateurs puissent encore la supporter, elle est en cours d'éradication. Ne l'utilisez ni dans d'anciens projets, ni dans de nouveaux. Les pages et applications Web l'utilisant peuvent cesser de fonctionner à tout moment.

Source : https://developer.mozilla.org/fr/docs/Web/HTML/Element/center

Si ça marche et que ça te convient tant mieux, mais je te conseil plutôt d'utiliser les marges ou text-align en css pour centrer un élément.

PS : n'hésite pas à préciser le plus possible le but recherché, celui-ci n'étant pas évident pour nous d'après ton premier post ;)
arf la solution me convient car c'est la seul que j'ai réussi à faire

pour reprendre mon probléme :

http://i57.servimg.com/u/f57/18/31/43/74/sans_t11.png

Je shouaite méttre en place un lien en bouton CSS en bas de page pour retourner au menu principale de mon site

j'ai déja des bouton css dans mon site

et je pensais pouvoir réutilisé mon bouton css pour le bouton de bas de page

le code que j'ai acutellement :

html
<div style="text-align: center; font-family: Calibri;" 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;
}


a ce stade j'ai un beau bouton mais il n'est pas centrer ...

Je vais re-étudier la proposition de Pitet en jouant avec les margin: 0 auto;
Messages postés
2370
Date d'inscription
lundi 11 février 2013
Statut
Membre
Dernière intervention
10 mars 2020
430
On va essayer de modifier le moins possible ton code pour éviter les effets de bords.

Garde ton code actuel, supprime la balise <p> autour de ton lien et passe la valeur de la propriété display de .bouton a en inline-block :

<div style="text-align: center; font-family: Calibri;" class="bouton">
  <a href="services.html"><b>Retour Menu</b></a>
</div>


.bouton a {
	text-align: center;
	font-size: medium;
	display: inline-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;
}


Je suppose que tu travail en local et que nous ne pouvons pas avoir de lien direct vers ton site ?
Ça serait beaucoup plus facile pour t'aider ;)
Bon alors en partant sur le code de pitet le lien html

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

ne ce centre pas mais dans une <div> il ce centre ...

je vais partir sur ce alors :

html :
<div style="text-align:center">
<a href="services.html" class="mybutton">Retour Menu</a>
</div>


Css :
a.mybutton {
	margin: 0 auto;
	display: inline-block;
    width:210px;
 	height: 50px;
 	line-height:50px;
	vertical-align: middle;
	text-align: center;
	font-size: medium;
 	color: white;
 	font-weight: bold;
	background:url(images/boutonnoir.png);
}
a.mybutton:hover { 
  background:url(images/boutonnoir2.png); 
  color: #000;
}
Messages postés
156
Date d'inscription
samedi 23 juin 2007
Statut
Membre
Dernière intervention
18 mai 2019
6
Lu tiens vite fait en passant



<div id="conteneur_bouton"> 

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




#conteneur_bouton {
width: 200px;
height: 50px;
border-radius: 5px 5px 5px 5px;
background: #0066CC;
/*position:relative;*/

display: block;
background:url(boutonnoir.png) no-repeat;

}



#conteneur_bouton a { 
text-align: center; 
font-size: medium; 
display:block; 
width:210px; 
line-height:50px; 
vertical-align:middle; 
/*background:url(boutonnoir.png) no-repeat; */
color:white; 
text-decoration:none; 
} 
#conteneur_bouton a:hover { 
/*background:url(images/boutonnoir2.png) no-repeat; */
color: #000; 
text-decoration: none;
} 



--
J'ai simplifié le code

Merci a tous de votre aide

grâce à vous j'ai réussie mon site bon en 6 mois mais pour une 1er je suis plutôt fière

Je passe tous mes code a la validation ;)

résolu !
Messages postés
156
Date d'inscription
samedi 23 juin 2007
Statut
Membre
Dernière intervention
18 mai 2019
6
C'est super ; )