I am using the semantic interface platform for my site. I want to place the login window in the center of the page. I only need a page login window. I do not understand how to center using the semantic interface grid classes. Please help me on how to put in the login box.
My code is:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>my semantic website</title> <link rel="stylesheet" href="../css/semantic.min.css"> <link rel="stylesheet" href="../css/style.css"> <script src="../js/jquery-2.1.1.min.js" type="text/javascript" charset="utf-8" async defer> </script> <script src="../js/semantic.min.js" type="text/javascript" charset="utf-8" async defer></script> </head> <body> <div class="ui grid"> <div class="one column row"> <div class="ui padded grid"> <div class="three column row"> <div class="column"> <div class="ui segment"> <h4 class="ui dividing header">Account Info</h4> <div class="ui form"> <div class="field"> <label for="username">Username: </label> <div class="ui icon input"> <input type="text" placeholder="Username" name="username" id="username"> <i class="user icon"></i> </div> </div> <div class="field"> <label for="password">Password: </label> <div class="ui icon input"> <input type="password" placeholder="Password" name="password" id="password"> <i class="lock icon"></i> </div> </div> <input type="submit" name="submit" class="ui inverted blue button"> </div> </div> </div> </div> </div> </div> </div> </body> </html>
source share