[英]How to align bootstrap form at the center of the web page
我正在使用引导样式作为表单。 我希望此表单显示在页面的中心,但是即使我尝试在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  </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  </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>
我的浏览器的屏幕截图显示了以上形式:
如果您不想将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  </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  </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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.