Menu
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?
932
For example, if you're trying to align something horizontally OR vertically, it's not that difficult. You can just set text-align to center for an inline element, and margin: 0 auto would do it for a block-level element.
When the element to be centered is an inline element we use text-align center on its parent. When the element is a block level element we give it a width and set the left and right margins to a value of auto. With text-align: center in mind, most people look first to vertical-align in order to center things vertically.
Answer: Use the align-items-center Class In Bootstrap 4, if you want to vertically align a <div> element in the center or middle, you can simply apply the class align-items-center on the containing element.
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.
And the working jsFiddle
112
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
