centre de soumettre le formulaire boutons html / css

Je vais avoir des problèmes de centrage de mon formulaire html soumettre boutons en css.

droit maintenant, je suis en utilisant

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

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

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

et c'est ne rien faire, je sais que je suis probablement faire quelque chose de stupide de mal, quelqu'un pourrait-il m'aider?

Grâce

InformationsquelleAutor Belgin Fish | 2010-11-19

118

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

je vient de terminer un div autour d'eux et en a fait aligner au centre. ensuite, 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; }
```
- en fait, l'inconvénient de cette solution est que titulaire div centres de tout, y compris le texte et les enfants et les enfants des enfants... il est donc généralement préférable d'utiliser 'margin: 0 auto" sur des éléments uniques, quand nous ne voulons pas que le récipient entier centré - et, comme l'a souligné, vous pouvez le faire avec les éléments de bloc. Encore, de temps en temps j'utilise le centrage de ce genre, il est donc -0 de moi, puisque vous n'avez pas tort...
- Fonctionne parfaitement pour moi, quand je l'ai utilisé pour un CSS style bouton de lien. Envelopper le <a href> avec la div et de la classe et il devrait fonctionner parfaitement sans affecter les différentes classes.
- Merci beaucoup, simple mais fonctionne comme un charme.
InformationsquelleAutor Sebastian Patane Masuelli
29

Éléments d'entrée sont inline par défaut. Ajouter display:block pour obtenir les marges à appliquer. Ce sera, cependant, briser les boutons sur deux lignes distinctes. Utiliser un emballage <div> avec text-align: center comme suggéré par d'autres pour les mettre sur la même ligne.

InformationsquelleAutor Tom

Je vois quelques réponses ici, la plupart d'entre eux compliqué ou avec certains inconvénients (les autres divs, text-align ne fonctionne pas en raison de display: inline-block). Je pense que c'est le plus simple et le problème sans solution:

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

Absolument d'accord avec vous, c'est la meilleure solution, merci! +1

InformationsquelleAutor Adrian Adamczyk

Essayez ceci :

<!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 donne 2 exemples, vous pouvez utiliser celui qui convient le mieux à votre situation.

utilisation text-align:center sur le conteneur parent, ou de créer un conteneur pour cela.
si le conteneur doit avoir une taille fixe, utilisez auto marges gauche et droite pour le centrer dans le conteneur parent.

noter que auto est utilisé avec de simples blocs de centre dans l'espace parent par la distribution de l'espace vide à gauche et à droite.

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

Également Vérifier ce jsfiddle

Vous devez définir la marge sur le bouton. margin: 0 auto;

InformationsquelleAutor kta

1

Je suis en supposant que les boutons sont censés être les uns à côté des autres sur la même ligne, ils ne doivent pas tous être centré à l'aide de la fonction 'auto' de la marge, mais placé à l'intérieur d'un div avec une largeur définie qui a une marge de 0 auto":

CSS:
```
#centerbuttons{
   width:250px; 
   margin:0 auto;
}       
```
HTML (après retrait de la marge de propriétés à partir de votre boutons CSS):
```
<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>
```
InformationsquelleAutor Annie
0

Une solution simple si un seul bouton doit être centré est quelque chose comme:
```
<input type='submit' style='display:flex; justify-content:center;' value='Submit'>
```
Vous pouvez utiliser un style similaire à gérer plusieurs boutons.

InformationsquelleAutor 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 */

InformationsquelleAutor Dave Taitelbaum

Vous devez vous connecter pour publier un commentaire.