how to put login form @ center of screen

Question

I am developing MVC 3 application along with it I am using bootstrap for design. I have created the log in form. I am trying to set it at center position of the screen but some how its not working.

This is my code.

@using (Html.BeginForm("LoginUser","Login",FormMethod.Post))
{
 <div class="container-fluid" style="padding-left:0px; margin-top:165px; margin-left:140px;">
   <div class="row-fluid">
       <div class="span12 roundedDiv offset4" style="width:400px; height:250px;">

...
...
...
Controls...
....
....

    </div>
   </div>
 </div>

}

what to do ?

Here: http://stackoverflow.com/questions/953918/how-to-align-a-div-to-the-middle-of-the-page — DavidA, Mar 21 '13 at 05:12

score 2 · Answer 1 · answered Mar 21 '13 at 05:15

Margin auto does this for you, without having to use <center>.

<!DOCTYPE html>
<html>
    <head>
        <title>Login</title>
        <style type="text/css">
            #loginBox {
                margin: 20% auto;
                width: 200px;
            }
        </style>
    </head>
    <body>
        <form action="index.php" method="POST" id="loginBox">
            <input type="text" name="user" placeholder="Username" autocapitalize="off" /><br />
            <input type="password" name="pass" placeholder="Password" /><br />
            <input type="checkbox" name="remember"> Remember Me<br />
            <input type="submit" value="Log In" name="login" />
        </form>
    </body>
</html>

@Nil, @DavidA provided a better answer over all in his comment above. Where @avdgaag points out that you'd have to apply `text-align: center;` to the `` or else IE6 will not center the div. Then add `text-align: left;` to your form element. — Mark Tomlin, Mar 21 '13 at 05:17

score 1 · Answer 2 · answered Mar 21 '13 at 07:17

I would advise against usage of margins for the horizontal alignment. Try something like this:

<div class="container-fluid">
<div style="margin-top:20px;" class="row-fluid">
    <div class="offset4 span4 well">
        <h1>Login page</h1>
        <form method="POST">
            <label>Login:
                <input type="text" placeholder="Enter your login" name="username" autofocus class="span12">
            </label>
            <label>Password:
                <input type="password" placeholder="Enter your password" name="password" class="span12">
            </label>
            <hr>
            <div class="btn-toolbar">
                <button type="submit" class="btn btn-info">Log in</button><a href="/auth/google" class="btn">Sign in with Google</a>
            </div>
        </form>
    </div>
</div>

This is code I used to build a simple login form.

score 0 · Answer 3 · answered Mar 21 '13 at 05:18

0

Since you're using fluid container hence responsive design I'd recommend to avoid using hardcoded values like 400 px. Instead you can set it width by applying span class like:

<div class="row-fluid">
    <div class="offset3 span6">

It gives you login form width of 6 rows and 3 rows offset on the left and right (12 rows is default bootstrap grid).

answered Mar 21 '13 at 05:18

koss

874
1
10
22

tried....but in Firefox label(Username) and text box(Username textbox) appear on different position and in IE it appear at different position. I have below code.... `

Username

` – Nil Mar 21 '13 at 06:12

how to put login form @ center of screen

3 Answers3