web-dev-qa-db-fra.com

margin-left: auto et margin-right: auto ne fonctionne pas en entrée

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 créé un JSFiddle pour qu'il soit plus facile à comprendre: http://jsfiddle.net/XnKDQ/97/

htmlcsshtml5
39
Xecure

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

64
Christoph

J'ai trouvé la solution pour vous

vous devez spécifier l'élément width 

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

Dans mon cas, c’est le float: left que j’ai oublié. Veillez donc à appliquer float: none à votre champ de saisie.

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

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. 

4
Mike

En plus de tout, vous pouvez vérifier si votre corps a la position de paramètre. Il peut être réglé sur fixé. 

0
Carl Brusell

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

0
Akash Sinha

Vous avez peut faire quelque chose comme ça:

input {
  width: fit-content;
  margin: auto;
}
0
Onwuka Gideon

Vous voulez que les trois formes ensemble soient alignées au centre? Enveloppez-les dans une seule div et centrez-la à la place.

0
Supr