如何在网页的中心对齐引导格式

我对表单使用引导格式。我希望将此表单显示在页面的中心位置，但即使我尝试使用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

如何在网页的中心对齐引导格式

回答

相关问题