如何在網頁的中心對齊引導格式

我對錶單使用引導格式。我希望將此表單顯示在頁面的中心位置，但即使我嘗試使用margin 0 autoin css也無法完成此操作。任何人都可以幫忙如何在網頁的中心對齊引導格式

這是代碼：

<!doctype html> 
 
<html> 
 
<body> 
 
    <h2>Form</h2> 
 
    <br> 
 
    <form class="form-horizontal inputForm"> 
 
    <div class="form-group"> 
 
     <label class="control-label col-sm-2" for="name">Name &nbsp</label> 
 
     <div class="col-sm-2"> 
 
     <input class="form-control" type="text"> 
 
     </div> 
 
    </div> 
 
    <div class="form-group"> 
 
     <label class="control-label col-sm-2" for="email">Email &nbsp</label> 
 
     <div class="col-sm-2"> 
 
     <input class="form-control" type="email"> 
 
     </div> 
 
    </div> 
 
    <div class="form-group"> 
 
     <div class="col-sm-offset-2 col-sm-10"> 
 
     <button class="btn btn-primary">Sign Up</button> 
 
     </div> 
 
    </div> 
 
    </form> 
 

 
    <!-- Latest compiled and minified CSS --> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
    <!-- jQuery library --> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
    <!-- Latest compiled JavaScript --> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
    <link href="styles.css" rel="stylesheet"> 
 
</body> 
 

 
</html>

我的瀏覽器中顯示上述形式的截圖：

來源

2017-09-24 Chip

你需要它只居中橫向還是垂直？ –

@ m.spyratos要求頁面中心的表單水平。 – Chip

試試這個。我自動包裝形式與

<div class="container"> 
    <div class="row"> 
    <div class="col-md-4 mx-auto"></div> 
    </div> 
</div>

.MX-汽車中心柱與柱內你可以添加你形成具有.COL-3和COL-9，在我的例子。但要根據你需要的標籤和輸入來顯示來調整它。

這是CodePen。

編輯：我意識到你正在使用Bootstrap 3而不是4.在這種情況下，你可以嘗試這樣的事情，但它需要在移動設備上做一些工作。 CodePen。

來源

2017-09-24 22:33:36 Retros

像魅力一樣工作，做了一些改變，這就是我期待的。。 – Chip

如果你不喜歡以0123爲中心，把表格放在一個div和center div中。

body { text-align: center; border: 1px solid;} 
 
form { margin: auto; width: 200px; border: solid blue; display: block;}

<!doctype html> 
 
<html> 
 
<body> 
 
    <h2>Form</h2> 
 
    <br> 
 
    <form class="form-horizontal inputForm"> 
 
    <div class="form-group"> 
 
     <label class="control-label col-sm-2" for="name">Name &nbsp</label> 
 
     <div class="col-sm-2"> 
 
     <input class="form-control" type="text"> 
 
     </div> 
 
    </div> 
 
    <div class="form-group"> 
 
     <label class="control-label col-sm-2" for="email">Email &nbsp</label> 
 
     <div class="col-sm-2"> 
 
     <input class="form-control" type="email"> 
 
     </div> 
 
    </div> 
 
    <div class="form-group"> 
 
     <div class="col-sm-offset-2 col-sm-10"> 
 
     <button class="btn btn-primary">Sign Up</button> 
 
     </div> 
 
    </div> 
 
    </form> 
 

 
    <!-- Latest compiled and minified CSS --> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
    <!-- jQuery library --> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
    <!-- Latest compiled JavaScript --> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
    <link href="styles.css" rel="stylesheet"> 
 
</body> 
 

 
</html>

來源

2017-09-24 22:00:13 jack

但現在它顯示我[這種方式]（https://github.com/pavanchilukuri/bootstrap-form/blob/master/ss-2.PNG）@jack – Chip

文本對齊中心也形式 – jack

Didn' t工作:(@jack – Chip

如何在網頁的中心對齊引導格式

回答

相關問題