it-swarm.com.de

Wie zentriere ich Elemente in der Zurb Foundation?

Ich baue ein Anmeldeformular und möchte, dass die Felder für Benutzername und Kennwort in der Mitte des Bildschirms stehen. Ich verwende auch das Zurb Foundation-Paket, um dieses Formular zu erstellen. Ich habe Probleme, die Dinge vertikal zu zentrieren. 

Hier ist mein 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>

Und ein paar CSS, mit denen ich herumgespielt habe, die aber noch nicht funktioniert haben: 

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;
}

Seltsamerweise funktioniert das nicht, wenn ich die Höhe von etwas zu dynamisch verändere (d. H. height: 30%;). Warum?

21
SimaPro

UPDATE

Diese Funktion wird in einer zukünftigen Version von Foundation als Komponente (xy-center) enthalten. Weitere Details zu Github .

Wenn Sie eine ältere Version von Foundation verwenden, wird das Anmeldeformular mit der CSS Tricks-Zentriermethode vertikal und horizontal zentriert, wobei minimal CSS/HTML-Markup verwendet wird.

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%);
}

Ergebnis

Das Anmeldeformular bleibt unabhängig von der Bildschirmgröße vertikal und horizontal zentriert. Hier ist ein Screenshot des Ergebnisses. 

enter image description here

Und die arbeitende jsFiddle

29
Brett DeWoody

Foundation behandelt die vertikale Ausrichtung nicht gut: https://github.com/zurb/foundation/issues/411 .

Sie können es mit vertikaler Polsterung approximieren, aber für dynamische Inhalte gibt es keinen sauberen Weg.

Das folgende jsFiddle (nicht von mir erstellt) zeigt, wie es funktionieren sollte

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

http://jsfiddle.net/53ALd/6/ - aber es wird nicht in Verbindung mit dem Rest der Foundation CSS verwendet.

6
Sinister Beard

Das Problem ist, dass HTML/CSS die vertikale Zentrierung nicht wirklich gut beherrscht. Zurbs Stiftung wird Ihnen diesbezüglich weder helfen noch schaden.

Siehe diese sehr ähnliche Frage Erstellen einer vertikal und horizontal zentrierten HTML-Datei div

0
Ed Charbeneau