自举：水平定心英雄单元和垂直

Question

我有一个包含一个Django形式的英雄单元。我如何将它集中在页面上，既水平又垂直？

编辑：

<div class="row-fluid"> 
     <div class="span8 hero-unit"> 

      {{ form }} 

     </div> 
    </div> 

这是相当多的形式是什么样子。

Answer 1

JSFiddle with form

编辑：只是想提高这个答案的人谁需要帮助。

那么这是如何实现一个以中间为中心的形式的英雄单位。

首先，CSS：

.hero-unit { 
padding:50px 50px 50px 50px; 
    } 
.form-horizontal .control-label { 
    width: 61px; 
    } 
.form-horizontal .controls { 
margin-left: 80px; 
    } 
/* Landscape phones and down */ 
    @media (max-width: 480px) { 

.hero-unit{ 
margin-left:-20px; 
margin-right:-20px; 
    } 
.form-horizontal .controls { 
margin-left: 0; 
    } 
    } 

HTML部分：

<div class="container"> 
<div class="hero-unit"> 
    <div class="row-fluid"> 
     <div class="offset4 span4"> 
      <legend>Sign in to WebApp</legend> 
      <form class="form-horizontal"> 
       <div class="control-group"> 
        <label class="control-label" for="inputEmail">Email</label> 
        <div class="controls"> 
         <input type="text" id="inputEmail" placeholder="Email"> 
        </div> 
       </div> 
       <div class="control-group"> 
        <label class="control-label" for="inputPassword">Password</label> 
        <div class="controls"> 
         <input type="password" id="inputPassword" placeholder="Password"> 
        </div> 
       </div> 
       <div class="control-group"> 
        <div class="controls"> 
         <label class="checkbox"> 
          <input type="checkbox">Remember me</label> 
         <button type="submit" class="btn">Sign in</button> 
        </div> 
       </div> 
      </form> 
     </div> 
    </div> 
    </div> 
</div>