web-dev-qa-db-ja.com

Zurb Foundationで要素を垂直方向に中央揃えするには？

ログインフォームを作成していますが、画面の中央にユーザー名とパスワードのフィールドを四角くしたいです。また、Zurb Foundationパッケージを使用してこのフォームを作成しています。私は物事を垂直方向に集中させるのに苦労しています。

ここに私のコードがあります：

<!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>

そして、私がいじってみたが、まだ機能しないCSSをいくつか紹介します。

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

奇妙なことに、何かの高さを動的に変更すると（つまり、height: 30%;）動作しない、なぜですか？

cssformattingcenteringzurb-foundation
22
SimaPro

[〜＃〜] update [〜＃〜]

この機能は、次期バージョンのFoundationのコンポーネント（xy-center）として含まれています。 Github の詳細。

Foundationの古いバージョンを使用している場合、 CSS Tricks centering method を使用すると、最小限の量の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%);
}

結果

サインインフォームは、画面サイズに関係なく、垂直方向と水平方向の中央に配置されます。これが結果のスクリーンショットです。

enter image description here

そして、動作 jsFiddle

29
Brett DeWoody

Foundationは、垂直方向の配置をうまく処理できません： https://github.com/zurb/foundation/issues/411 。

垂直方向のパディングで概算できますが、動的コンテンツの場合、適切な方法はありません。

次のjsFiddle（私は作成していません）は、それを使用してどのように機能するかを示しています

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

http://jsfiddle.net/53ALd/6/ -ただし、Foundation CSSの他の部分とは連動しません。

6
Sinister Beard

問題は、HTML/CSSが実際に垂直方向のセンタリングをうまく処理できないことです。 Zurb's Foundationは、この点であなたを助けたり傷つけたりすることはありません。

この非常に似た質問を参照してください 垂直および水平方向に中央揃えされたhtml div

0
Ed Charbeneau