CONNEXION
  • RetourJeux
    • Sorties
    • Hit Parade
    • Les + populaires
    • Les + attendus
    • Soluces
    • Tous les Jeux
    • Gaming
  • RetourActu Gaming
    • News
    • Astuces
    • Tests
    • Previews
    • Toute l'actu gaming
  • RetourBons plans
    • Bons plans
    • Bons plans Smartphone
    • Bons plans Hardware
    • Bons plans Image et Son
    • Bons plans Amazon
    • Bons plans Cdiscount
    • Bons plans Decathlon
    • Bons plans Fnac
    • Tous les Bons plans
  • RetourJVTech
    • Actus High-Tech
    • Intelligence Artificielle
    • Smartphones
    • Mobilité urbaine
    • Hardware
    • Image et son
    • Tutoriels
    • Tests produits High-Tech
    • Guides d'achat High-Tech
    • JVTech
  • RetourCulture
    • Actus Culture
    • Culture
  • RetourVidéos
    • A la une
    • Gaming Live
    • Vidéos Tests
    • Vidéos Previews
    • Gameplay
    • Trailers
    • Chroniques
    • Replay Web TV
    • Toutes les vidéos
  • RetourForums
    • Hardware PC
    • PS5
    • Switch 2
    • Xbox Series
    • Switch
    • Pokemon pocket
    • FC 25 Ultimate Team
    • League of Legends
    • Tous les Forums
  • PC
  • PS5
  • Xbox Series
  • Switch 2
  • PS4
  • One
  • Switch
  • iOS
  • Android
  • MMO
  • RPG
  • FPS
En ce moment Genshin Impact Valhalla Breath of the wild Animal Crossing GTA 5 Red dead 2
Liste des sujets

Centrer verticalement entre 2 blocs

PillsDispenser
PillsDispenser
Niveau 67
25 septembre 2018 à 22:54:05

Bonjour,

<?php
include 'public/assets/include/header.php';
?>
<section>
  <div class="container">
    <div class="row">
      <div class="col-md-12">
        <h1 class="text-center pb-3">Login to Paladins Challenge</h1>
      </div>
    </div>
    <div class="row">
      <div class="col-md-6 offset-md-3">
        <div class="card">
          <div class="card-body">
            <form method="POST" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>">
              <div class="form-group">
                <label for="signInEmail">Email address</label>
                <input type="email" class="form-control" id="signInEmail" name="email" placeholder="Your email address" required>
              </div>
              <div class="form-group">
                <label for="signInPassword">Password</label>
                <input type="password" class="form-control" id="signInPassword" name="password" placeholder="Your password" required minlength="8" maxlength="20">
              </div>
              <div class="row">
                <div class="col-md-6">
                  <p>
                    <button type="submit" class="btn btn-purple btn-block" name="sign-in">Login</button>
                  </p>
                </div>
                <div class="col-md-6">
                  <p>
                    <a class="btn btn-orange btn-block" href="register.php" aria-describedby="loginHelp" style="color: white;">Register</a>
                    <small id="loginHelp" class="form-text text-muted text-center">No account? Click here.</small>
                  </p>
                </div>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
<?php
include 'public/assets/include/footer.php';
?>

Je n'arrive pas a centrer verticalement cette login card.
Comment faire ?

Batora
Batora
Niveau 10
25 septembre 2018 à 23:37:37

J'ai la flemme de déchiffrer ton html mais dans 95% des cas pour centrer un élément, dans n'importe quelle orientation, utiliser le mode de display flex sur le parent fonctionne bien.

Mowfawck
Mowfawck
Niveau 7
29 septembre 2018 à 17:37:35

Sinon pour centrer verticalement tu mets une height sur le parent et tu donne 50% de cette height a l'enfant que tu veux centrer verticalement à ce parent

Thymotep
Thymotep
Niveau 10
29 septembre 2018 à 18:21:31

Utilise flexbox :d) https://philipwalton.github.io/solved-by-flexbox/demos/vertical-centering/

Sous forums
  • Aide à l'achat Mac
  • Création de Jeux
  • Linux
  • Création de sites web
  • Programmation
  • Internet
  • Steam Deck
  • Macintosh
  • Hardware
La vidéo du moment