Центр регистрационной формы начальной загрузки

Я пытаюсь разместить страницу регистрации в центре моей html-страницы. Я использую bootstrap, но немного запутался, как сосредоточить его после нескольких попыток. Вот часть html-страницы, над которой я работаю. Эти HTML код идет в <body>:Центр регистрационной формы начальной загрузки

<div class="container registration-container"> 
    <div class="row"> 
     <div class="span6"> 
      <form class="form-horizontal" id="registerHere" method='post' action=''> 
      <fieldset> 
       <legend>Registration</legend> 

       <div class="control-group"> 
        <label class="control-label">Name</label> 
        <div class="controls"> 
         <input type="text" class="input-xlarge" id="user_name" name="user_name" rel="popover" data-content="Enter your first and last name." data-original-title="Full Name"> 
        </div> 
       </div> 


       <div class="control-group"> 
        <label class="control-label">Email</label> 
        <div class="controls"> 
         <input type="text" class="input-xlarge" id="user_email" name="user_email" rel="popover" data-content="What’s your email address?" data-original-title="Email"> 
        </div> 
       </div> 

       <div class="control-group"> 
        <label class="control-label"></label> 
        <div class="controls"> 
         <button type="submit" class="btn btn-success" >Create My Account</button> 
        </div> 
        <div class="control-group success"> 
         <!-- TODO --> 
        </div> 
        <div class="control-group error"> 
         <!-- TODO --> 
        </div> 
       </div> 
      </fieldset> 
      </form> 
     </div> 
    </div> 
</div>

и это CSS Я пытаюсь сделать эту форму регистрации выглядит хорошо:

.registration-container{ 
position: relative; 
background: rgba(240, 248, 255, 0.5); 
width: 600px; 
/*margin-top: 40%;*/ 
margin-bottom: auto; 
} 

legend{ 
text-align: center; 
}

Однако эта форма выглядит очень некрасиво: легенда не сосредоточен и не подходит в контейнере, и все выглядит странно ... Может кто-то, пожалуйста, помогите мне выяснить, как я могу сделать эту форму более профессиональной и хорошей стилистикой?

источник

2013-09-12 Allan Jiang

обеспечить демонстрацию. Кажется здесь прекрасно: http://jsbin.com/OZImEHu/1/edit –

Try This CSS это будет работать нормально DEMO HERE

.registration-container{ 
position: relative; 
background: rgba(240, 248, 255, 0.5); 
width: 600px; 
margin:0px auto; 
}

источник

2013-09-12 04:23:53

попробуйте использовать это с использованием свойства в css - margin: 0 auto;

.registration-container{ 
position: relative; 
background: rgba(240, 248, 255, 0.5); 
width: 600px; 
/*margin-top: 40%;*/ 
margin-bottom: auto; 
margin: 0 auto; 

}

источник

2013-09-12 04:22:11

.registration-container{ margin: 0 auto; }

установить контейнер центр экрана :)

источник

2013-09-12 05:19:07

Центр регистрационной формы начальной загрузки

ответ

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