大家好，又见面了，我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。
Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺
在进行前端页面设置的时候，发现写完的form表单始终无法居中显示，详细如图1所示：![如何是HTML页面中的表单居中显示[通俗易懂]](https://img2018.cnblogs.com/blog/1252141/201902/1252141-20190225235643719-849367450.jpg)
![如何是HTML页面中的表单居中显示[通俗易懂]](https://javaforall.net/wp-content/uploads/2020/11/2020110817443450.jpg)
图1：问题图示
代码如下：
<form class="form-inline" > <div class="form-group"> <label for="exampleInputName2">证书编号:</label> <input type="text" class="form-control" id="exampleInputName2" placeholder="请准确输入证书编号"> </div> <div class="form-group"> <label for="exampleInputEmail2">获证组织名称:</label> <input type="email" class="form-control" id="exampleInputEmail2" placeholder="输入不少于5个字符"> </div> <button type="submit" class="btn btn-default">查询</button> </form>
分析原因：form本来就只是一个表单而已，对页面根本就没有布局上的作用.，因此无论怎么设置都是无法居中的，但是依旧有办法解决的；
解决办法：在外面套一层<div style=”width:100%;text-align:center”></div>
代码如下：
<div style="width:100%;text-align:center"> <form class="form-inline" > <div class="form-group"> <label for="exampleInputName2">证书编号:</label> <input type="text" class="form-control" id="exampleInputName2" placeholder="请准确输入证书编号"> </div> <div class="form-group"> <label for="exampleInputEmail2">获证组织名称:</label> <input type="email" class="form-control" id="exampleInputEmail2" placeholder="输入不少于5个字符"> </div> <button type="submit" class="btn btn-default">查询</button> </form> </div>
最终效果如图2所示：![如何是HTML页面中的表单居中显示[通俗易懂]](https://img2018.cnblogs.com/blog/1252141/201902/1252141-20190226000133695-1279214029.jpg)
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/168350.html原文链接：https://javaforall.net
