1

Estou usando o framework CSS Zurb Foundation, e já realizei varias tentativas de centralizar este formulário no centro da tela. Já tentei atacar com um CSS normal de colocar 50% no topo e na esquerda e definir margens negativas com posição absoluta. Mas, mesmo assim não obtive êxito. Contudo, estou a pouco tempo utilizando este framework. Alguém sabe como centralizar esse formulário verticalmente, estou usando Foundation puro.

O resultado que consegui até agora foi este: inserir a descrição da imagem aqui

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

1 Resposta 1

1

Se não me engano ele não tem por padrão como diz aqui, mas você pode fazer desta forma:

div {
display: table-cell;
vertical-align: middle;
height: 50px;
border: 1px solid red;
}
2
  • Implementei sua sugestão. Mas, não deu certo!
    – Luitame
    Commented 29/08/2014 às 19:06
  • 1
    coloca no fiddle para podermos ajudar mais
    – Otto
    Commented 29/08/2014 às 19:25

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .