Centralize in vertical form with Zurb Foundation

Asked

Viewed 1,708 times

1

I am using the CSS framework Zurb Foundation, and have made several attempts to center this form in the center of the screen. I’ve tried attacking with a normal CSS of putting 50% at the top and left and setting negative margins with absolute position. But even then I was not successful. However, I am very soon using this framework. Does anyone know how to center this form vertically, I’m using pure Foundation.

The result I have achieved so far is this: inserir a descrição da imagem aqui

Follows HTML:

<!DOCTYPE html>
<!--[if IE 9]><html class="lt-ie10" lang="pt-br" > <![endif]-->
<html class="no-js" lang="pt-br" >

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SPARV 2.0 | Login</title>

<!-- If you are using the CSS version, only link these 2 files, you may add app.css to use for your overrides if you like -->
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/foundation.css">

<!-- If you are using the gem version, you need this only -->
<script src="js/vendor/modernizr.js"></script>

</head>
<body>
  <div class="row">
    <div class="large-12 columns">
        <img src="images/logos/img.png" alt="" class="right">
        <img src="images/logos/img.png" alt="" class="right">
    </div>
</div>
<div class="row">
    <div class="large-4 large-centered columns">
        <form id="centro" action="">
            <fieldset>
                <legend>Login</legend>
                <label>Usuário
                    <input type="text" placeholder='Digite seu usuário aqui'>
                </label>
                <label>Senha
                    <input type="password" placeholder="******">
                </label>

                <input type="submit" style="margin-bottom: -0.3125rem;" value="Log in" class="button tiny right">

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

<script src="js/vendor/jquery.js"></script>
<script src="js/foundation.min.js"></script>
<script>
$(document).foundation();
</script>

css zurb-foundation

1 answer

1

If I’m not mistaken he doesn’t have by default as he says here, but you can do it this way:

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

  • I implemented your suggestion. But it didn’t work!

  • 1

    put it on the fiddle so we can help out more

Browser other questions tagged css zurb-foundation

You are not signed in. Login or sign up in order to post.