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

Réponse 2 / 11

Pitet Messages postés 2826 Date d'inscription Statut Membre Dernière intervention 527

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;
}

Réponse 3 / 11

uniuc Messages postés 304 Date d'inscription Statut Membre Dernière intervention 32

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;
}

--

Réponse 4 / 11

uniuc Messages postés 304 Date d'inscription Statut Membre Dernière intervention 32

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

--

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question

Réponse 5 / 11

Séb41100

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

Réponse 6 / 11

Séb41100

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 !

Réponse 7 / 11

Séb41100

oui c'est le bute recherché

si non avec un simple

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

ça marche ...

Réponse 8 / 11

Pitet Messages postés 2826 Date d'inscription Statut Membre Dernière intervention 527

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 ;)

Réponse 9 / 11

Séb41100

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;

Pitet Messages postés 2826 Date d'inscription Statut Membre Dernière intervention 527

On va essayer de modifier le moins possible ton code pour éviter les effets de bords.

Garde ton code actuel, supprime la balise 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 ;)

Réponse 10 / 11

Séb41100

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;
}

Réponse 11 / 11

Séb41100

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 !

uniuc Messages postés 304 Date d'inscription Statut Membre Dernière intervention 32

C'est super ; )

Centrer un bouton css dans une div

11 réponses

Votre réponse

Discussions similaires