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

Question

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 :

Retour Menu

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 Configuration: Windows 7 / Chrome 31.0.1650.63

Pitet · Accepted Answer

Salut, Pour commencer, tu appliques ton style à la balise

, 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 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 Retour Menu N'ayant pas tes images, j'ai remplacé les background par une couleur. Bonne journée

uniuc · Answer

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

Séb41100 · Answer

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

Séb41100 · Answer

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 !

Pitet · Answer

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

Séb41100 · Answer

oui c'est le bute recherché si non avec un simple

Retour Menu

ça marche ...

Pitet · Answer

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

Séb41100 · Answer

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

Retour Menu

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;

Séb41100 · Answer

Bon alors en partant sur le code de pitet le lien html Retour Menu ne ce centre pas mais dans une

il ce centre ... je vais partir sur ce alors : html :

Retour Menu

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

uniuc · Answer

Lu tiens vite fait en passant

Retour Menu

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

Séb41100 · Answer

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 !

Centrer un bouton css dans une div

11 réponses

Discussions similaires