css - texto - ¿Cómo centrar verticalmente los elementos en la Fundación Zurb?
centrar verticalmente css flex (3)
El problema es que HTML / CSS realmente no maneja bien el centrado vertical. La Fundación Zurb no te va a ayudar o lastimar a este respecto.
Vea esta pregunta muy similar Creación de un div html centrado vertical y horizontalmente
Estoy creando un formulario de inicio de sesión y quiero que los campos de nombre de usuario y contraseña se encuentren en el centro de la pantalla. También estoy usando el paquete de la Fundación Zurb para construir este formulario. Estoy teniendo muchos problemas para centrar las cosas verticalmente.
Aquí está mi código:
<!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>
Y algunos CSS con los que he jugado, pero aún no he llegado a trabajar:
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;
}
Extrañamente, si cambio la altura de algo para que sea dinámico (es decir, height: 30%; ) no funciona, ¿por qué?
Foundation no maneja bien la alineación vertical: https://github.com/zurb/foundation/issues/411 .
Puede aproximarlo con el relleno vertical, pero no hay una forma clara de evitar el contenido dinámico.
El siguiente jsFiddle (no creado por mí) muestra cómo debería funcionar usando
div {
display: table-cell;
vertical-align: middle;
height: 50px;
border: 1px solid red;
}
http://jsfiddle.net/53ALd/6/ - pero no lo hará en conjunto con el resto de Foundation CSS.
ACTUALIZAR
Esta característica se incluye como un componente (xy-center) en una próxima versión de Foundation. Más detalles sobre Github .
Si está utilizando una versión anterior de Foundation, el método de centrado de CSS Tricks centrará vertical y horizontalmente el formulario de inicio de sesión con una cantidad mínima de marcado 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%);
}
Resultado
El formulario de inicio de sesión se mantendrá centrado vertical y horizontalmente, independientemente del tamaño de la pantalla. Aquí hay una captura de pantalla del resultado.
Y el trabajo de jsFiddle