margin-left : auto et margin-right : auto ne fonctionne pas sur l'entrée

Question

J'ai une entrée sous une forme que j'essaie d'aligner au centre. Généralement, margin-left:auto et margin-right: auto ne répondent pas lorsque display: block n'est pas ajouté au CSS. J'ai ajouté display: block à mon CSS mais il ne s'affiche toujours pas comme je le voudrais.

J'ai fait un JSFiddle pour rester plus facile à comprendre : http://jsfiddle.net/XnKDQ/97/

Answer 1

Pour que margin: 0 auto; fonctionne, en plus de display:block un width doit être spécifié.

Answer 2

Dans mon cas, c'est float: left que j'ai oublié. Alors, assurez-vous d'appliquer float: none à votre champ de saisie.

Vous avez déjà display: block et margin: 0 auto , il vous suffit également de définir la largeur.

Exemple qui devrait fonctionner :

 input{
     width:50% !important;
     margin:0 auto !important;
     display:block !important;
     float:none !important;
}

Si cela ne fonctionne pas, essayez d'ajouter !important aux valeurs ou assurez-vous que votre style n'est pas écrasé par autre chose.

Answer 3

j'ai trouvé la solution pour toi

vous devez spécifier la largeur de l'élément

 input {
  display: block;
  width: 60px;
  margin: 10px auto;
  padding: 3px;
}

Answer 4

Vous voulez que les trois formes soient alignées au centre ? Enveloppez-les dans un seul div et centrez ce div à la place.

Answer 5

en plus de spécifier la largeur et le bloc d'affichage, vérifiez également si la propriété float est définie sur aucun.