Centrer bouton en html

Bonjour,

j'ai fait des boutons en html le rendu est pas trop mal sauf que je n'arrive pas à les centrer dans ma page ... ils sont tout à gauche et avec les balises <center> et </center> impossible ça ne marche pas que dois je faire ??

<p> <div style="float:left"><button> <font color="#8000ff"><font size ="4"><font color ="#000066"> Accueil</font color></fontsize></button></div>

<div style="float:left"><button> <font color="#8000ff"><font size = "4"> <font color ="#000066">Présentation </font color> </font size></button></div>

<div style="float:left"><button> <font color="#8000ff"><font size = "4"> <font color ="#000066">Produits et services </font color> </font size></button></div>

<div style="float:left"><button> <font color="#8000ff"><font size = "4"> <font color ="#000066"> Infos pratiques </font color> </font size></button></div>

<div style="float:left"><button> <font color="#8000ff"><font size = "4"> <font color ="#000066">Nous contacter </font color> </font size></button></div> </p>

32 réponses

  • Votes
  • Date
  • Date décroissante
Résumé de la discussion

Le problème porte sur le centrage de plusieurs boutons en HTML dans une page, car les solutions basées sur float ou les balises center ne produisent pas l’alignement souhaité. Des approches efficaces consistant à retirer les flottants, à appliquer text-align:center sur le conteneur et à présenter les boutons comme éléments inline ou inline-block permettent d’obtenir un centrage fiable et compatible. Pour les rendre cliquables, privilégier des liens hypertexte () ou associer des événements onclick, et préférer des styles CSS plutôt que des éléments de navigation complexes.

Bobot (l’IA à votre service)
  1. Je te conseille de suivre ces cours https://openclassrooms.com/fr/courses/1603881-apprenez-a-creer-votre-site-web-avec-html5-et-css3

    J'ai étudié les principaux langages web : html/css, php, javascript durant mon dut et les cours de html/css était bien pompé sur ce site.

    Ces cours sont sympas, bien expliqué de quoi devenir un vrai pro ;-)
    1. je vais essayer dans la journée pour voir je te tiens au courant merci ;)
      1. Oui le lien te signal les erreurs, et si tu regard tu as 3 onglets, un pour rentrer l'url de la page, un autre pour uploadé ton fichier et un autre pour copier directement ton code.

        Sinon voici le bout de code que j'utilise pour le menu de mon site :

        <div id="menu_horizontal">
        <ul>
        <li> <a href="<?php bloginfo('url'); ?>" onMouseOver="document.home.src='http://www.anima-geek.fr/wp-content/themes/Willem_Theme/images/h_home.png';"
        onMouseOut="document.home.src='http://www.anima-geek.fr/wp-content/themes/Willem_Theme/images/home.png';">

        <img name="home" src='http://www.anima-geek.fr/wp-content/themes/Willem_Theme/images/home.png' alt="Home" />
        </a> <li>

        <li> <a href="http://www.anima-geek.fr/?page_id=12" onMouseOver="document.galerie.src='http://www.anima-geek.fr/wp-content/themes/Willem_Theme/images/h_galeries.png';"
        onMouseOut="document.galerie.src='http://www.anima-geek.fr/wp-content/themes/Willem_Theme/images/galeries.png';">

        <img name="galerie" src='http://www.anima-geek.fr/wp-content/themes/Willem_Theme/images/galeries.png' alt="galeries d'images" />
        </a> <li>

        <li> <a href="http://www.anima-geek.fr/?page_id=59" onMouseOver="document.video.src='http://www.anima-geek.fr/wp-content/themes/Willem_Theme/images/h_videos.png';"
        onMouseOut="document.video.src='http://www.anima-geek.fr/wp-content/themes/Willem_Theme/images/videos.png';">

        <img name="video" src='http://www.anima-geek.fr/wp-content/themes/Willem_Theme/images/videos.png' alt="Vidéos" />
        </a> </li>

        <li id="contact"> <a href="http://www.anima-geek.fr/?page_id=60" onMouseOver="document.contact.src='http://www.anima-geek.fr/wp-content/themes/Willem_Theme/images/h_contact.png';" onMouseOut="document.contact.src='http://www.anima-geek.fr/wp-content/themes/Willem_Theme/images/contact.png';">

        <img name="contact" src='http://www.anima-geek.fr/wp-content/themes/Willem_Theme/images/contact.png' alt="Contact" /> </a> </li>
        </ul>

        </div>

        Il est un peu complexe car j'utilise javascript pour que l'image du bouton change au passage de la souris.

        et voici mon code css :

        #menu_horizontal {
        float: left;
        margin-top:-4px;
        }

        #menu_horizontal ul{
        display : inline;
        list-style : none;
        padding-left : 6px;
        }

        #menu_horizontal ul li{
        display : inline;
        margin-left : -2px;

        }

        #menu_horizontal ul li a{

        }

        #menu_horizontal ul li a img {
        border : none;

        }

        le seul hic de mon code css c'est qu'il est décallé d'1px sur la droite sous IE ><
        1. merci mais ça corrige les erreurs ? je n'ai pas encre d'hébergeur donc .... :(
          je me demande si tu peux me dire si ça serait pas plus facile par ex de faire mes boutons moi meme non et les mettre comme image avec lien comme ça ils seraient où je veux et centrer non?
          si ça peut marcher comme ça dis le ou dites le moi car je vais surement faire ça ça m'évitera de perdre trop de temps à essayer et essayer et chercher chercher ...merci ;)
          1. l'utilisation de la balise form ce justifie lorsqu'on envoie des information sur une autre page.

            je te conseille d'utiliser ceci pour voir tes erreurs de codages et eventuelles problème http://validator.w3.org/
            1. Merci fxtaa mais excuse moi mais je n'ai rien compris à ton code !! ;) je suis dsl ....

              merci mircosotrem mais en fait ça marche les liens sur mon deuxième code le soucis maintenant c'est d'alligner les boutons sur une seule ligne tu as une solution pour ça ??
              bravo si tu as 13 ans bravo !! ;)
              1. C est un ptit code a mettre dans ta feuille de style css pour faire un effet bouton, sans passer par un formulaire ni par des images.
            2. Enfaite, dans
              value="ton texte"
              tu peut mettre n'importe quel mot,
              apres
              href="tapage.html"
              dans "tapage.html" tu met le nom de ton fichier html :
              Example:
              si ton fichier s'appele "
              presentation.html
              "
              alors tu met a la place de "
              tapage.html
              " ceci "
              presentation.html
              " met sa depend le nom de ton fichier,
              y'a plus qu'a appuiyer surle boutont ;)
              Si ta un pb, n'hesite pas.

              ne tinquiete pas au debut tu a un peu de mal en html met apres sa va, moi par example j'ai commencez a 11ans et j'ai 13ans et maintenant je creer des application :D bonne chance.
              1. Enfaite, dans
                value="ton texte"
                tu peut mettre n'importe quel mot,
                apres
                href="tapage.html"
                dans "tapage.html" tu met le nom de ton fichier html :
                Example:
                si ton fichier s'appele "
                presentation.html
                "
                alors tu met a la place de "
                tapage.html
                " ceci "
                presentation.html
                " met sa depend le nom de ton fichier,
                y'a plus qu'a appuiyer surle boutont ;)
                Si ta un pb, n'hesite pas.

                ne tinquiete pas au debut tu a un peu de mal en html met apres sa va, moi par example j'ai commencez a 11ans et j'ai 13ans et maintenant je creer des application :D bonne chance.
                1. <center>
                  <a href="Accueil.htm"><button>Accueil</button></a>
                  <a href="Presentation.htm"><button>Présentation</button></a>
                  <a href="Produits et services.html"><button>Produits et services</button> </a>
                  <a href="Infos pratiques.html"> <button>Infos pratiques</button> </a>
                  <a href="Nous contacter.html"> <button>Nous contacter</button></a>
                  </center>
                  ça souligne le lien à l'intérieur du bouton mais rien ne se passe ...ça n'ouvre même pas une page ...

                  par contre j'ai essayé ce code que j'ai trouvé sur internet :

                  <center><FORM ACTION="Présentation.html">
                  <INPUT TYPE="SUBMIT" VALUE="Présentation"></FORM>

                  <FORM ACTION="Produits et services.html">
                  <INPUT TYPE="SUBMIT" VALUE="Produits et services"></FORM>
                  <FORM ACTION="Infos pratiques.html">
                  <INPUT TYPE="SUBMIT" VALUE="Infos pratiques"></FORM>

                  <FORM ACTION="Nous contacter.html">
                  <INPUT TYPE="SUBMIT" VALUE="Nous contacter"></FORM></center>
                  là les liens fonctionnent bien ça ouvre la bonne page html mais impossible de mettrel es boutons sur la même ligne..
                  ça me désespère il n'y a aucune solution à mon problème ou je dois créer des boutons moi même et les mettre comme image ?

                  une solution svp pour mes deux codes ou l'un deux au moins ? merci ;)
                  1. salut, le css3 ? :)

                    Enleve ton form et tes input et remet des liens <a href="bob.html" class="menu">Go to bob</a>
                    .menu{
                    	-webkit-border-radius:3px 3px 3px 3px;
                    	-moz-border-radius:3px 3px 3px 3px;
                    	-webkit-box-shadow:0 1px rgba(255, 255, 255, 0.4), 0 20px 20px -10px white inset;
                    	-moz-box-shadow:0 1px rgba(255, 255, 255, 0.4), 0 20px 20px -10px white inset;
                    	border:1px solid rgba(0, 0, 0, 0.6);
                    	display:inline-block;
                    	font:12px/13px "Lucida Grande",sans-serif;
                    	margin:0 3px;
                    	padding:3px 6px;
                    	text-shadow:0 1px rgba(255, 255, 255, 0.4);
                    	background:none repeat scroll 0 0 #969696;
                    	margin-bottom : 5px;
                    }
                2. pour les liens on utilise la balise <a></a> normalement.

                  je pense que tu as du faire une erreur quelque part dans ton code.

                  peut on avoir le code du fichier en question?
                  1. on dirait que les liens ne marche pas sur la balise "button" .... qu'en pensez vous ??
                    1. ben oui elle existe .... ;) c'est pour ça que je n'y comprends rien de rien !!!
                      j'ai mis le <a href=" " avant pour essayer mais sans le </a> de fin et là ça me met par exemple présentation en lien souligné et ça ouvre bien par ex présentation si je clique desssus mais le bouton encadré disparé complètement ....
                      1. ben oui elle existe .... ;) c'est pour ça que je n'y comprends rien de rien !!!
                        j'ai mis le <a href=" " avant pour essayer mais sans le </a> de fin et là ça me met par exemple présentation en lien souligné et ça ouvre bien par ex présentation si je clique desssus mais le bouton encadré disparé complètement ....
                        1. la page d'accueil exist-elle au moins?

                          Parsque si le <a href=""></a> fonctionne pas c'est qu'il y'a une faute dans le html plus haut
                          1. ça ne marche pas non plus ... c'est un truc de fou quand je clique ça reste sur accueil ça ne va pas sur présentation...
                            en plus le code css pour centrer peut il pmarcher dessu aussi ???
                            aidez moi svp à rendre mon bouton clicaable surle bon lien ! merci ;)
                            1. pardon mais là je ne connais pas value ="ma page" c'est par es value ="Présentation " dans mon cas ??
                              ça me change tout le code pour la barre en haut ? non ?
                              je suis novice c'est pour ça... merci ;)
                              1. Et pas je te recomande ce code :

                                <input type="button" href="page.html" value="Ma page"/>
                                1. merci mais ça c'est résolu merci quand même
                                  maitenant c'est un lien vers une une autre page html que je veux et qui ne fonctionne pas... en fait je veux des boutons clicable mais ça nemarche pas ...
                                  merci
                                  1. Bonjour A Toi, je crois detenire la solution a ton Probleme, en faite si j'ai bien compris
                                    tu veux que tout tes boutont soit centrer.
                                    Si tu as un fichier css rajoute ceci :
                                    input
                                    {
                                    margin: auto;
                                    }
                                    1. Salut, pour qu'un margin auto fonctionne, la balise doit avoir un width de définit si je ne dis pas de bêtises.
                                  • 1
                                  • 2