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

Question

我正在使用引導樣式作為表單。 我希望此表單顯示在頁面的中心，但是即使我嘗試在CSS中使用 margin 0 auto ，也無法執行此操作。 誰能幫忙。

這是代碼：

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

我的瀏覽器的屏幕截圖顯示了以上形式：

Answer 1

如果您不想將body居中，請將表單放在div中並將該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>

Answer 2

嘗試這個。 我用

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

.mx-auto將列自動居中，在本例中，您可以添加具有.col-3和col-9的表單。 但是請根據需要顯示標簽和輸入的方式進行調整。

這是CodePen 。

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

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

問題描述

2 個解決方案

解決方案1
1 2017-09-24 22:00:13

解決方案2
1 已采納 2017-09-24 22:33:36

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

問題描述

2 個解決方案

解決方案1 1 2017-09-24 22:00:13

解決方案2 1 已采納 2017-09-24 22:33:36

解決方案1
1 2017-09-24 22:00:13

解決方案2
1 已采納 2017-09-24 22:33:36