Forum : Centrer un input

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>

ThibaultJ

Auteur

Réponse acceptée

C'est bon j'ai un peu bricoler !

.champ{ margin-left: 40px; }

TJ_

Azorgh

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

kyldev

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

Auteur

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

Defy

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

Auteur

Comment il faut faire Defy ? (Je debut)

Defy

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

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

betaWeb

@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.

Centrer un input

9 réponses