Question

我试图将此Bootstrap form作为中心。

我希望输入字段和按钮与DOM的中心对齐。

<div>                
    <div class = "container">                    
        <div>                             
            <form class = "">        
                <div  class = "row">          
                    <div class = "form-group">          
                        <input  type = "email" class = "form-control input-lg" placeholder = "Enter email address "/>        
                    </div>   
                </div>
                <div  class = "row">              
                    <div class = "form-group">
                        <input  type = "password" class = "form-control input-lg" placeholder = "Enter password" /> 
                    </div>            
                    <input type = "submit" class = "btn btn-info btn-lg"/>
                </div>                              
            </form> 
        </div> 
    </div>  
</div>

Answer 1

尝试使用此

<div>
  <div class="container">
    <div align="">
      <form class="text-center">
        <div class="">
          <div class="form-group">
            <input type="email" class="form-control input-lg" placeholder="Enter email address " />
          </div>
        </div>
        <div class="">
          <div class="col-sm-4">
          </div>
          <div class="form-group">
            <input type="password" class="form-control input-lg" placeholder="Enter password" />
          </div>
          <input type="submit" class="btn btn-info btn-lg" />
        </div>
      </form>
    </div>
  </div>
</div>

Answer 2

尝试使用position：absolute，transform：translateX和transform：translateY

这将使表格垂直和水平居中。

<div style="position: relative; height: 100vh;">                
<div class = "container" style="position: absolute; top: 50%; transform: translateY(-50%); left: 50%; transform: translateX(-50%); text-align:center;">
....

＆＃13;

<div style="position: relative; height: 100vh;">                
    <div class = "container" style="position: absolute;
  top: 50%;
  transform: translateY(-50%); left: 50%;
  transform: translateX(-50%); text-align:center;
">                    
        <div>                             
            <form class = "">        
                <div  class = "row">          
                    <div class = "form-group">          
                        <input  type = "email" class = "form-control input-lg" placeholder = "Enter email address "/>        
                    </div>   
                </div>
                <div  class = "row">              
                    <div class = "form-group">
                        <input  type = "password" class = "form-control input-lg" placeholder = "Enter password" /> 
                    </div>            
                    <input type = "submit" class = "btn btn-info btn-lg"/>
                </div>                              
            </form> 
        </div> 
    </div>  
</div>

＆＃13;

Answer 3

给外部div形成一个固定的宽度并以这种方式居中：

.outerDiv{
   width: 300px;
   margin:0 auto;
}

检查JsFiddle

Answer 4

同样在这里..使用它。

 <html>
    <head>
    <link href="css/bootstrap.min.css" rel="stylesheet"> 

    <div>                
        <div class = "container">                    
            <div>                             
                <form class = "text-center">        
                    <div  class = "row">          
                        <div class = "form-group">          
                            <input  type = "email" class = "form-control input-lg" placeholder = "Enter email address "/>        
                        </div>   
                    </div>
                    <div  class = "row">              
                        <div class = "form-group">
                            <input  type = "password" class = "form-control input-lg" placeholder = "Enter password" /> 
                        </div>            
                        <input type = "submit" class = "btn btn-info btn-lg"/>
                    </div>                              
                </form> 
            </div> 
        </div>  
    </div>
     <!-- jQuery -->
        <script src="js/jquery.js"></script>

        <!-- Bootstrap Core JavaScript -->
        <script src="js/bootstrap.min.js"></script>

    </body>
    </html>

如何将我的SignUp从Bootstrap中心化？

4 个答案: