web-dev-qa-db-fra.com

Boutons de soumission de formulaire centraux HTML / CSS

Je rencontre des problèmes pour centrer les boutons de soumission de formulaire HTML en CSS.

En ce moment j'utilise:

    <input value="Search" title="Search" type="submit" id="btn_s">
    <input value="I'm Feeling Lucky" title="I'm Feeling Lucky" name="lucky" type="submit" id="btn_i">

avec ce contenu CSS

#btn_s{
    width: 100px;
    margin-left: auto;
    margin-right: auto;
}

#btn_i {
    width: 125px;
    margin-left: auto;
    margin-right: auto;
}

Et ça ne fait rien. Je sais que je fais probablement quelque chose de mal stupide. Comment puis-je réparer cela?

htmlcsscenteralignment
64
Belgin Fish

http://jsfiddle.net/SebastianPataneMasuelli/rJxQC/

je viens d'enrouler une div autour et de la faire aligner au centre. alors vous n'avez pas besoin de CSS sur les boutons pour les centrer.

<div class="buttonHolder">
  <input value="Search" title="Search" type="submit" id="btn_s"> 
  <input value="I'm Feeling Lucky" title="I'm Feeling Lucky" name="lucky" type="submit" id="btn_i">
</div>

.buttonHolder{ text-align: center; }
119
Sebastian Patane Masuelli

Les éléments d'entrée sont intégrés par défaut. Ajoutez display:block pour obtenir les marges à appliquer. Cela cassera cependant les boutons sur deux lignes distinctes. Utilisez un wrapping <div> avec text-align: center comme suggéré par d'autres personnes pour les placer sur la même ligne.

29
Tom

Je vois quelques réponses ici, la plupart d’entre elles compliquées ou présentant certains inconvénients (divs supplémentaires, text-align ne fonctionne pas à cause de l’affichage: inline-block). Je pense que c'est la solution la plus simple et sans problème:

HTML:

<table>
    <!-- Rows -->
    <tr>
        <td>E-MAIL</td>
        <td><input name="email" type="email" /></td>
    </tr>
    <tr>
        <td></td>
        <td><input type="submit" value="Register!" /></td>
    </tr>
</table>

CSS:

table input[type="submit"] {
    display: block;
    margin: 0 auto;
}
12
Adrian Adamczyk

Essaye ça :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<head>
    <style type="text/css">
        #btn_s{
            width:100px;
        }

        #btn_i {
            width:125px;
        }
        #formbox {
            width:400px;
            margin:auto 0;
            text-align: center;
        }
    </style>
</head>
<body>
    <form method="post" action="">
        <div id="formbox">
            <input value="Search" title="Search" type="submit" id="btn_s"> 
            <input value="I'm Feeling Lucky" title="I'm Feeling Lucky" name="lucky" type="submit" id="btn_i">
        </div>
    </form>
</body>

Cela a 2 exemples, vous pouvez utiliser celui qui convient le mieux à votre situation.

  • utilisez text-align:center sur le conteneur parent ou créez un conteneur à cet effet.
  • si le conteneur doit avoir une taille fixe, utilisez auto marges gauche et droite pour le centrer dans le conteneur parent.

notez que auto est utilisé avec des blocs simples pour les centrer dans l’espace parent en distribuant l’espace vide à gauche et à droite.

6
SuperDuck
<style>
form div {
    width: 400px;   
    border: 1px solid black;
} 

form input[type='submit']  {
    display: inline-block;
    width: 70px;
}

div.submitWrapper  {
   text-align: center;    
}    
</style>
<form>

<div class='submitWrapper'>    
<input type='submit' name='submit' value='Submit'> 
 </div>

Vérifiez aussi ceci jsfiddle

1
kta

Je suppose que les boutons sont supposés être côte à côte sur la même ligne. Ils ne doivent pas tous être centrés à l'aide de la marge "auto", mais placés à l'intérieur d'un div de largeur définie comportant une marge "0 auto". :

CSS:

#centerbuttons{
   width:250px; 
   margin:0 auto;
}

HTML (après avoir supprimé les propriétés de la marge du CSS de vos boutons):

<div id="centerbuttons">
     <input value="Search" title="Search" type="submit"> 
     <input value="I'm Feeling Lucky" title="I'm Feeling Lucky" name="lucky" type="submit">
</div>
1
Annie

Une solution simple si un seul bouton doit être centré est la suivante:

<input type='submit' style='display:flex; justify-content:center;' value='Submit'>

Vous pouvez utiliser un style similaire pour gérer plusieurs boutons .

0
Nagev
/* here is what works for me - set up as a class */

.button {
    text-align: center;
    display: block;
    margin: 0 auto;
}

/* you can set padding and width to whatever works best */
0
Dave Taitelbaum