CODEWITHSUNDEEP
cssformattingcenteringzurb-foundation
SimaPro
SimaPro

Reputation: 1234

How to vertically center elements in Zurb Foundation?

I am building a login form and I want the username and password fields square in the middle of the screen. I am also using the Zurb Foundation package to build this form. I am having a lot of trouble centering things vertically.

Here is my 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>

And some CSS that I've played around with, but haven't gotten to work yet: 

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

Wierdly, if I change the height of something to be dynamic (i.e. height: 30%;) it does not work, why?

Upvotes: 23

Views: 50662

Answers (3)

Brett DeWoody
Brett DeWoody

Reputation: 62773

UPDATE

This feature is being included as a component (xy-center) in an upcoming version of Foundation. More details on Github.

If you're using an older version of Foundation, using the CSS Tricks centering method will vertically and horizontally center the sign-in form with a minimal amount of CSS/HTML markup.

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

Result

The sign-in form will stay centered vertically and horizontally regardless of screensize. Here's a screenshot of the result.

enter image description here

And the working jsFiddle

Upvotes: 30

Sinister Beard
Sinister Beard

Reputation: 3680

Foundation doesn't handle vertical alignment well: https://github.com/zurb/foundation/issues/411.

You can approximate it with vertical padding, but there's no neat way around it for dynamic content.

The following jsFiddle (not created by me) shows how it should work using

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

http://jsfiddle.net/53ALd/6/ - but it won't in conjunction with the rest of the Foundation CSS.

Upvotes: 6

Ed Charbeneau
Ed Charbeneau

Reputation: 4634

The problem is that HTML/CSS doesn't really handle vertical centering well. Zurb's Foundation isn't going to help or hurt you in this respect.

See this very similar question Creating a vertically and horizontally centered html div

Upvotes: 0

Related Questions