IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Mise en page CSS Discussion :

[BootStrap-5] Centrage pour des labels et inputs


Sujet :

Centrer un élément en CSS

  1. #1
    Membre actif
    Homme Profil pro
    Ressources humaines
    Inscrit en
    septembre 2009
    Messages
    422
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Doubs (Franche Comté)

    Informations professionnelles :
    Activité : Ressources humaines

    Informations forums :
    Inscription : septembre 2009
    Messages : 422
    Points : 212
    Points
    212
    Par défaut [BootStrap-5] Centrage pour des labels et inputs
    Bonsoir,


    J'ai l'impression que mes labels et inputs ne sont pas correctement centrés...

    J'ai utilisé la classe "container" en BootStrap 5, mais j'ai pas l'impression que ça a fonctionné?



    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
     
    <!DOCTYPE html>
    <html lang='en'>
       <head>
          <meta charset='UTF-8'>
          <meta http-equiv='X-UA-Compatible' content='IE=edge'>
          <meta name='viewport' content='width=device-width, initial-scale=1.0'>
          <title>Document</title>
          <link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css' integrity='sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU' crossorigin='anonymous'>
          <script src='https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.min.js' integrity='sha384-skAcpIdS7UcVUC05LJ9Dxay8AXcDYfBJqt1CJ85S/CFujBsIzCIv+l9liuYLaMQ/' crossorigin='anonymous'></script>
       </head>
       <body>
          <div class="container pt-5 text-center">
             <h1>Sélection d'un portefeuille</h1>
             <form>
                <div class="pt-5">
                   <div class="d-inline-flex col-md-4 col-form-label text-right">
                      <label for="exampleInputPassword1" class="form-label d-flex justify-content-end align-items-end pe-3" style="min-width: 240px !important">Type of account</label>
                      <select class="form-select" style="min-width: 380px !important">
                         <option>All agencies</option>
                         <option>ATH - Ath</option>
                         <option>BAU - Baudour</option>
                      </select>
                   </div>
                </div>
                <div class="mt-3">
                   <div class="d-inline-flex col-md-4 col-form-label text-right">
                      <label for="exampleInputPassword1" class="form-label d-flex justify-content-end align-items-end pe-3" style="min-width: 240px !important">Type of account</label>
                      <select class="form-select" style="min-width: 380px !important">
                         <option>All agencies</option>
                         <option>ATH - Ath</option>
                         <option>BAU - Baudour</option>
                      </select>
                   </div>
                </div>
                <div class='row'>
                   <div class="col-12">
                      <button type="submit" class="btn btn-primary">Confirm</button>
                   </div>
                </div>
             </form>
          </div>
       </body>
    </html>

  2. #2
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    janvier 2011
    Messages
    15 616
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : janvier 2011
    Messages : 15 616
    Points : 39 616
    Points
    39 616
    Par défaut
    Bonjour,
    repart sur quelque chose de plus simple :
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    <div class="row row-cols-2">
      <div class="col text-end">
        <label for="exampleInputPassword1" class="form-label">Type of account</label>
      </div>
      <div class="col">
        <select class="form-select">
          <option>All agencies</option>
          <option>ATH - Ath</option>
          <option>BAU - Baudour</option>
        </select>
      </div>
    </div>
    ce sera un bon début ou pas loin

  3. #3
    Membre actif
    Homme Profil pro
    Ressources humaines
    Inscrit en
    septembre 2009
    Messages
    422
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Doubs (Franche Comté)

    Informations professionnelles :
    Activité : Ressources humaines

    Informations forums :
    Inscription : septembre 2009
    Messages : 422
    Points : 212
    Points
    212
    Par défaut
    Bonjour,

    Merci pour ton aide, c'est exactement ce que je voulais!

    J'ai juste une petite question, comment fais-tu pour aligner correctement un bouton par rapport aux inputs?

    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    <!DOCTYPE html>
    <html lang='en'>
       <head>
          <meta charset='UTF-8'>
          <meta http-equiv='X-UA-Compatible' content='IE=edge'>
          <meta name='viewport' content='width=device-width, initial-scale=1.0'>
          <title>Document</title>
          <link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css' integrity='sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU' crossorigin='anonymous'>
          <script src='https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.min.js' integrity='sha384-skAcpIdS7UcVUC05LJ9Dxay8AXcDYfBJqt1CJ85S/CFujBsIzCIv+l9liuYLaMQ/' crossorigin='anonymous'></script>
       </head>
       <body>
          <div class="container pt-5 text-center">
             <h1>Sélection d'un portefeuille</h1>
             <form>
                <div class="row row-cols-2">
                   <div class="col text-end">
                      <label for="exampleInputPassword1" class="form-label">Numéro du registre national</label>
                   </div>
                   <div class="col">
                      <select class="form-select">
                         <option>All agencies</option>
                         <option>ATH - Ath</option>
                         <option>BAU - Baudour</option>
                      </select>
                   </div>
                </div>
                <div class="row row-cols-2 pt-3">
                   <div class="col text-end">
                      <label for="exampleInputPassword1" class="form-label">Type de portefeuille </label>
                   </div>
                   <div class="col">
                      <select class="form-select">
                         <option>All agencies</option>
                         <option>ATH - Ath</option>
                         <option>BAU - Baudour</option>
                      </select>
                   </div>
                </div>
                <div class="row row-cols-2 pt-3">
                   <div class="col text-end">
                      <label for="exampleInputPassword1" class="form-label">Numéro du registre national</label>
                   </div>
                   <div class="col">
                      <input type="text" class="form-control" name="exampleInputEmail1" style="min-width: 380px" aria-describedby="emailHelp" required>
                   </div>
                </div>
                <div class="row row-cols-2">
                   <div class="col">
                      <button type="submit" class="btn btn-primary">Valider</button>
                   </div>
                </div>
             </form>
          </div>
       </body>
    </html>

  4. #4
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    janvier 2011
    Messages
    15 616
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : janvier 2011
    Messages : 15 616
    Points : 39 616
    Points
    39 616
    Par défaut
    Pour ton <button> il faut faire simple, BootStrap complique déjà joyeusement les choses
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    <div class="pt-3">
      <button type="submit" class="btn btn-primary">Valider</button>
    </div>

  5. #5
    Membre actif
    Homme Profil pro
    Ressources humaines
    Inscrit en
    septembre 2009
    Messages
    422
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Doubs (Franche Comté)

    Informations professionnelles :
    Activité : Ressources humaines

    Informations forums :
    Inscription : septembre 2009
    Messages : 422
    Points : 212
    Points
    212
    Par défaut
    Donc c'est pas possible d'aligner le bouton par rapport aux inputs?

  6. #6
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    janvier 2011
    Messages
    15 616
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : janvier 2011
    Messages : 15 616
    Points : 39 616
    Points
    39 616
    Par défaut
    Tu veux dire centré en dessous des <input>, si oui utilise la même structure.
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    <div class="row row-cols-2 pt-3">
      <div class="col"><!-- celle là est vide --></div>
      <div class="col">
        <button type="submit" class="btn btn-primary">Valider</button>
      </div>
    </div>

  7. #7
    Membre actif
    Homme Profil pro
    Ressources humaines
    Inscrit en
    septembre 2009
    Messages
    422
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Doubs (Franche Comté)

    Informations professionnelles :
    Activité : Ressources humaines

    Informations forums :
    Inscription : septembre 2009
    Messages : 422
    Points : 212
    Points
    212
    Par défaut
    En fait, je voudrais vraiment que le bouton soit aligné de la même manière que les inputs.



    Je ne parviens pas à reproduire ce dont j'essaye de faire.

  8. #8
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    janvier 2011
    Messages
    15 616
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : janvier 2011
    Messages : 15 616
    Points : 39 616
    Points
    39 616
    Par défaut
    Il te faut dans ce cas annuler le centrage hérité du parent via le text-center.
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    <div class="col text-start">
      <button type="submit" class="btn btn-primary">Valider</button>
    </div>

  9. #9
    Membre actif
    Homme Profil pro
    Ressources humaines
    Inscrit en
    septembre 2009
    Messages
    422
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Doubs (Franche Comté)

    Informations professionnelles :
    Activité : Ressources humaines

    Informations forums :
    Inscription : septembre 2009
    Messages : 422
    Points : 212
    Points
    212
    Par défaut
    Merci beaucoup NoSmoking, je n'aurai jamais trouvé la solution sans ton aide.

    Un grand merci à toi.

  10. #10
    Membre éclairé Avatar de jreaux62
    Homme Profil pro
    Webmaster
    Inscrit en
    juin 2021
    Messages
    461
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 54
    Localisation : France, Pas de Calais (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Webmaster
    Secteur : Arts - Culture

    Informations forums :
    Inscription : juin 2021
    Messages : 461
    Points : 878
    Points
    878
    Par défaut
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
            <div class="container pt-5">
              <h1 class="text-center">Sélection d'un portefeuille</h1>
              <form>
                <div class="row">
                  <div class="col-md-4 text-start text-md-end">
                    <label for="exampleInputPassword1" class="form-label">Numéro du registre national</label>
                  </div>
                  <div class="col-md-8">
                    <select class="form-select">
                      <option>All agencies</option>
                      <option>ATH - Ath</option>
                      <option>BAU - Baudour</option>
                    </select>
                  </div>
                </div>
                <div class="row pt-3">
                  <div class="col-md-4 text-start text-md-end">
                    <label for="exampleInputPassword1" class="form-label">Type de portefeuille </label>
                  </div>
                  <div class="col-md-8">
                    <select class="form-select">
                      <option>All agencies</option>
                      <option>ATH - Ath</option>
                      <option>BAU - Baudour</option>
                    </select>
                  </div>
                </div>
                <div class="row pt-3">
                  <div class="col-md-4 text-start text-md-end">
                    <label for="exampleInputPassword1" class="form-label">Numéro du registre national</label>
                  </div>
                  <div class="col-md-8">
                    <input type="text" class="form-control" name="exampleInputEmail1" style="min-width: 380px" aria-describedby="emailHelp" required>
                  </div>
                </div>
                <div class="row pt-3">
                  <div class="col-md-4"></div>
                  <div class="col-md-8 text-start">
                    <button type="submit" class="btn btn-primary">Valider</button>
                  </div>
                </div>
              </form>
            </div>

    • "text-center" doit s'appliquer sur (ne concerne que) le <h1>
    • col-md-xx : on passe à la ligne sur smartphone
    • attention : supprimer les " row-cols-2"
    • + remplacer les "text-end" par "text-start text-md-end" si on veut les labels à gauche sur smartphone

    + suppression de style="min-width: 380px" (inutile) sur <input>

  11. #11
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    janvier 2011
    Messages
    15 616
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : janvier 2011
    Messages : 15 616
    Points : 39 616
    Points
    39 616
    Par défaut
    Juste une petite remarque, pour conserver le centrage par rapport au <h1> comme initialement demandé, il serait judicieux de mettre des md-6 à la place des md-4 et md-8.
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    <div class="col-md-6"></div>
      <div class="col-md-6 text-start"></div>

    Je pense d'autre part qu'il ne serait pas inintéressant de lire au moins Grid system pour comprendre la philosophie de BootStrap !

  12. #12
    Membre éclairé Avatar de jreaux62
    Homme Profil pro
    Webmaster
    Inscrit en
    juin 2021
    Messages
    461
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 54
    Localisation : France, Pas de Calais (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Webmaster
    Secteur : Arts - Culture

    Informations forums :
    Inscription : juin 2021
    Messages : 461
    Points : 878
    Points
    878
    Par défaut
    On voit néanmoins que le mot "Centrage" dans l'intitulé n'a pas / plus grand'chose à voir avec la préoccupation réelle

    md-6 apporte en effet un "centrage" physique,... mais un déséquilibre visuel...

    Citation Envoyé par NoSmoking Voir le message
    ...lire au moins Grid system...
    +1

  13. #13
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    janvier 2011
    Messages
    15 616
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : janvier 2011
    Messages : 15 616
    Points : 39 616
    Points
    39 616
    Par défaut
    md-6 apporte en effet un "centrage" physique,... mais un déséquilibre visuel...
    c'est pas faux (Kaamelott) ... perso comme les <label> sont longs j'opterais pour«  le tout à la ligne » mais les goûts et les couleurs ...!

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Alignement vertical des label et input
    Par chrisdot dans le forum Mise en page CSS
    Réponses: 3
    Dernier message: 24/01/2014, 11h10
  2. Lissage des polices pour un label
    Par black is beautiful dans le forum Flex
    Réponses: 0
    Dernier message: 25/02/2010, 11h48
  3. aide pour les changement des labels des icones de mon menu
    Par Invité dans le forum GTK+ avec C & C++
    Réponses: 1
    Dernier message: 15/08/2009, 02h45
  4. Affichage des labels pour les courbes
    Par spakhen dans le forum iReport
    Réponses: 6
    Dernier message: 29/07/2009, 16h03
  5. Boucle pour acceder à des labels (id1, id2, id3)
    Par johnson95 dans le forum Composants
    Réponses: 5
    Dernier message: 27/10/2008, 23h40

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo