web-dev-qa-db-fra.com

Comment centrer verticalement les éléments dans Zurb Foundation?

Je suis en train de créer un formulaire de connexion et je souhaite que les champs nom d'utilisateur et mot de passe apparaissent au centre de l'écran. J'utilise également le package Zurb Foundation pour créer ce formulaire. J'ai beaucoup de mal à centrer les choses verticalement. 

Voici mon code:

<!DOCTYPE html>

<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]>    <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]>    <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->

    <head>
      <meta charset="utf-8" />

      <!-- Set the viewport width to device width for mobile -->
      <meta name="viewport" content="width=device-width" />
      <title>
            Registration
        </title>

         <!-- Included CSS Files (Compressed) -->
          <link rel="stylesheet" href="stylesheets/foundation.min.css">
          <link rel="stylesheet" href="stylesheets/app.css">
          <link rel="stylesheet" href="stylesheets/main.css">

          <script src="javascripts/modernizr.foundation.js"></script>

          <!-- IE Fix for HTML5 Tags -->
          <!--[if lt IE 9]>
            <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
          <![endif]-->
    </head>
        <nav class="top-bar">
         <ul>
            <li class="name"><h1><a href="#">Title</a></h1></li>
            <li class="toggle-topbar"><a href="#"></a></li>
        </ul>
        <section>
            <ul class="left">
                <li><a href="#">Link</a></li>
            </ul>
            <ul class="right">
                <li><a href="#">Link</a></li>
            </ul>
        </section>
        </nav>
    <body>
        <div class="row" id="parent">
            <div class="six columns" id="child">
                <form id = "register">
                    <input type="text">

                </form>
            </div>
        </div>



        <script src="javascripts/jquery.foundation.topbar.js"></script>
        <!-- Included JS Files (Compressed) -->
        <script src="javascripts/jquery.js"></script>
        <script src="javascripts/foundation.min.js"></script>
        <!-- Initialize JS Plugins -->
        <script src="javascripts/app.js"></script>
    </body>
</html>

Et certains CSS avec lesquels j'ai joué, mais qui n'ont pas encore fonctionné: 

body {
    /*background-image: url('../images/gplaypattern.png');*/
    background: red;
}

#register {
    background-color:  black;
    width:80%;
}

#parent {
    position: absolute; 
    left: 50%; 
    top: 50%; 
    height: 80px;
}

#child {
    height: 75px;
    position:absolute;
    top: 50%;
    background: green;
}

Bizarrement, si je change la hauteur d’un élément dynamique (c.-à-d. height: 30%;) cela ne fonctionne pas, pourquoi?

cssformattingcenteringzurb-foundation
21
SimaPro

METTRE &AGRAVE; JOUR

Cette fonctionnalité est incluse en tant que composant (xy-center) dans une prochaine version de Foundation. Plus de détails sur Github .

Si vous utilisez une version antérieure de Foundation, utilisez la méthode Méthode de centrage des astuces CSS pour centrer le formulaire de connexion verticalement et horizontalement avec un minimum de balises CSS/HTML.

HTML

<div class="row" >
    <div class="small-12 medium-6 columns" id="login">
        <form >
            <div class="row collapse">
                <div class="small-12 medium-5 columns">
                    <input type="text" name="username" placeholder="Username" />
                </div>
                <div class="small-12 medium-5 columns">
                    <input type="password" name="password" placeholder="Password" />
                </div>
                <div class="small-12 medium-2 small-centered medium-uncentered columns">
                  <a href="#" class="button postfix">Go</a>
                </div>
            </div>
        </form>
    </div>
</div>

CSS

#login {
    position: absolute;
    left: 50%;
    top: 50%;

    /*
    *  Where the magic happens
    *  Centering method from CSS Tricks
    *  http://css-tricks.com/centering-percentage-widthheight-elements/
    */
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
}

Résultat

Le formulaire de connexion restera centré verticalement et horizontalement, quelle que soit la taille de l'écran. Voici une capture d'écran du résultat. 

enter image description here

Et le travail jsFiddle

29
Brett DeWoody

Foundation ne gère pas bien l'alignement vertical: https://github.com/zurb/foundation/issues/411 .

Vous pouvez l'approcher avec un remplissage vertical, mais il n'y a pas de solution de rechange intéressante pour le contenu dynamique.

Le jsFiddle suivant (non créé par moi) montre comment cela devrait fonctionner en utilisant

div {
display: table-cell;
vertical-align: middle;
height: 50px;
border: 1px solid red;
}

http://jsfiddle.net/53ALd/6/ - mais ce ne sera pas le cas avec le reste de la Fondation CSS.

6
Sinister Beard

Le problème est que HTML/CSS ne gère pas vraiment le centrage vertical. La Fondation Zurb ne va pas vous aider ou vous faire du mal à cet égard.

Voir cette question très similaire Créer un div en HTML centré verticalement et horizontalement

0
Ed Charbeneau