Thursday, November 6, 2014

How to center a div in the middle of the viewport

Note: If you use <form> tag in the page, it should have the same css style as for the html, body

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta charset="utf-8" />
        <title>Login</title>
        <style type="text/css">
            html, body {
                margin: 0px;
                padding: 0px;
                width: 100%;
                height: 100%;
                display: table;
                font-family: Verdana;
                font-size: small;
            }
            .login-container {
                display: table-cell;
                text-align: center;
                vertical-align: middle;
            }
            .content {
                background-color: grey; /* sample usage */
                display: inline-block;
                text-align: left;
                line-height: 25px;
            }
        </style>
    </head>
    <body>
        <section class="login-container">
            <div class="content">
                <input type="text" name="username" id="userName" maxlength="50" placeholder="Username">
                <br>
                <input type="password" name="password" maxlength="50" placeholder="Password">
                <br>
                <div>
                    <label><input type="checkbox" name="rememberLogin" id="rememberLogin" value="1">Stay logged in</label>
                    &nbsp;
                    <input type="button" name="login" value="Login">
                    <br>
                </div>
            </div>
        </section>
    </body>
</html>

No comments:

Codeigniter Shield Authorization

Codeigniter Shield Authorization CodeIgniter Shield is the official authentication and authorization framework for CodeIgniter 4. It provide...