jQuery: centrare verticalmente un form di login sulla pagina

Come possiamo centrare verticalmente un form di login in una pagina? Con l'aiuto di jQuery.

jQuery di Gabriele Romanato

Come possiamo centrare verticalmente un form di login in una pagina? Con l'aiuto di jQuery.

Partiamo da questa marcatura:


<body>
<div id="login-form-wrap">
	<form action="" method="post" id="login-form">
		<!--...-->
	</form>
</div>
</body>

Dobbiamo impostare il padding superiore del contenitore del form in modo che sia uguale alla metà dell'altezza della finestra meno l'altezza calcolata del form:


var $loginForm = $( "#login-form" );
var $loginFormWrap = $loginForm.parent();

$loginFormWrap.css( "padding-top", ( $( window).height() / 2 ) - $loginForm.outerHeight() + "px" );

Commenti