SignUpをBootstrapの中央に置くにはどうしたらいいですか？

私はこれを中心にしようとしていますBootstrap form。SignUpをBootstrapの中央に置くにはどうしたらいいですか？

私は、入力フィールドとボタンを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>

出典

2017-06-23 Waltham WECAN

位置を使用してみてください。この

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

出典

2017-06-23 22:44:02

を使用しよう：移動Xと変換：変換、絶対移動Y

これは、垂直方向と水平方向の形を中心に説明します。

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

出典

2017-06-23 22:47:33

固定幅とセンターそれをこのように形成し、外側のdivを与える：

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

これを使用します..ここで同じJsFiddle

出典

2017-06-28 04:34:23

をチェック。

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

出典

2017-06-28 07:15:51 Mayank

SignUpをBootstrapの中央に置くにはどうしたらいいですか？

答えて

関連する問題