2013-03-21 2 views
1

Я разрабатываю приложение MVC 3 вместе с ним Я использую bootstrap для дизайна. Я создал регистрационную форму. Я пытаюсь установить его в центральном положении экрана, но некоторые из них не работают.Как добавить регистрационную форму @ центр экрана

Это мой код.

@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> 

} 

что делать?

+0

? –

+0

Здесь: http://stackoverflow.com/questions/953918/how-to-align-a-div-to-the-middle-of-the-page – DavidA

ответ

2

Margin auto делает это для вас, без использования <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> 
+0

@Nil, @DavidA предоставил лучший ответ на все в его комментарий выше. Где @avdgaag указывает, что вам придется применять 'text-align: center;' к '', иначе IE6 не будет центрировать div. Затем добавьте 'text-align: left;' в ваш элемент формы. –

0

Поскольку вы используете жидкий контейнер, поэтому отзывчивый дизайн, я бы рекомендовал избегать использования жестко заданных значений, таких как 400 px. Вместо этого вы можете установить его ширину, применяя класс диапазона, как:

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

Это дает вам войти в ширину формы 6 строк и 3 рядов офсетных слева и справа (12 строк по умолчанию сетки начальной загрузки).

+0

попытался .... но в ярлыке Firefox (Username) и текстовом поле (текстовое поле пользователя) отображаются в разных местах, а в IE он отображается в другом месте. У меня ниже кода .... '

' – Nil

1

Я бы посоветовал использовать поля для горизонтального выравнивания. Попробуйте что-то вроде этого:

<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> 

Это код, который я использовал, чтобы построить простую регистрационную форму.

Смежные вопросы