Centrer un input

Par ThibaultJ, il y a 11 ans

Les bases HTML/CSS

Bonjour,
Je suis en train de creer un formulaire de conexion, j'aimerais centrer les champs username et password.
Le code n'est pas optimiser Pourriez-vous m'aider.
Merci d'avance .
PS : Voici le code :```

<html> <head> <title></title> <link rel="stylesheet" href="http://css.domain.tld/bootstrap/bootstrap.min.css"> <style> body { padding-top: 40px; padding-bottom: 40px; } .logo{ height: 120px; width: 120px; margin-left: auto; margin-right: auto; display: block; } .hero-unit{ margin-left: auto; margin-right: auto; width: 300px; } .margin{ margin-top: 20px; } .text{ text-align: center; } .username{ display: inline-block; text-align: center; margin: auto; } .password{ display: block; text-align: center; margin: auto; } .btn{ display: block; margin: auto; } .champ{ margin-left: auto; margin-right: auto; } </style> </head> <body> <div class="container-fluid"> <div class="hero-unit"> <img class="logo" src="src/img/logo.png" /> <div class="margin"></div> <div class="margin"></div> <form method="post" action="" class="form-signin"> <p class="text">Nom d'utilisateur:</p> <br /> <div class="champ"> <input type="text" name="username" id="username" class="username" placeholder="Nom d'utilisateur"/> </div> <div class="margin"></div> <p class="text">Mot de passe:</p> <br /> <div class="champ"> <input type="password" name="password" id="password" class="password" placeholder="Mot de passe"/> </div> <div class="margin"></div> <button class="btn btn-large btn-primary" type="submit" >Connexion</button> </form> </div> </div> </body> </html>

9 réponses

Azorgh, il y a 11 ans

D'après ce que je vois, tu utilise Bootstrap ? Pourquoi ne pas utiliser ce qui t'es fourni avec ?

kyldev, il y a 11 ans

Bonjour, vous pouvez tout simplement faire comme ça :

input { margin-left: 50%; transform: translateX(-50%); /* Pour éviter que le champs soit trop décalé */ }
ThibaultJ, il y a 11 ans

Merci, mais j'ai essayer vos solution seule celle d'Aurélien Auclair met mes input a droite.

Defy, il y a 11 ans

c'est parceque tu n'as pas préfixé le transform avec les -webkit etc que la solution d'Aurelien Auclair de marche pas

ThibaultJ, il y a 11 ans

Comment il faut faire Defy ? (Je debut)

ThibaultJ, il y a 11 ans

C'est bon j'ai un peu bricoler !

.champ{ margin-left: 40px; }

TJ_

Defy, il y a 11 ans

essai ca

input { margin-left: 50%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); }
kyldev, il y a 11 ans

Normalement sur les navigateurs récent ce n'est plus utilisé.

betaWeb, il y a 11 ans

@Aurélien: Oui, mais il vaut mieux préfixer au cas où, les utilisateurs n'utilisent (malheureusement) pas tous un navigateur à jour :/

Personnellement j'utilise une autre technique (il faut cependant fixer une largeur à ton élément) :

input{ width: 256px; margin-left: calc(50% - 128px); }

La technique consistant à utiliser un transform: translateX(-50%) est utilse lorsque ton élément n'a pas de largeur fixe constante définie.