[Résolu] Placer un label à gauche d'un input field centré

Je ne comprends pas pourquoi le label avec le texte "1" n'est pas automatiquement placé devant mon input field qui est centré sur la page.

<label for="nom">1</label>
 <input id="nom" type="text"  name="nom" autofocus>

#nom {
   display:block;
   margin-left: auto;
   margin-right:auto;
   padding-left: 5px;
   padding-top:10px;
   margin-top:0px;
   padding-bottom: 10px;
   width: 500px;
   height:30px;
   font-size: 30px;
   line-height:20px;
   color:black;
   border-style: solid;
   border-width: 1px;
   border-color:black;
   border-radius: 0px;
}

fiddle:
https://jsfiddle.net/fredericmarcel/wzda4pLx/79/

Merci de votre aide.
Modifié par Felipe (14 Mar 2016 - 20:43)

Salut,

Parce que tu as mis un

display: block;

sur ton input

Si j'enlève le display:block, l'input n'est plus centré sur la page.
Comment le centrer et placer le label à gauche ?

Il faut mettre le tout dans une div puis centrer cette même div.

Ca n'a pas l'air de marcher.
Peux-tu me montrer sur le fiddle ?

Bonjour,

avec un paragraphe comme conteneur : https://jsfiddle.net/wzda4pLx/83/
Attention c'est l'ensemble label et input qui est centré, pas l'input centré et le label à sa gauche sans que ça le décale.
Méthode de centrage : text-align: center; ici (cf. http://www.alsacreations.com/article/lire/539-Centrer-les-elements-ou-un-site-web-en-CSS.html entre autres)

Merci Felipe; ça marche parfaitement