如何是HTML页面中的表单居中显示

最新推荐文章于 2025-06-14 17:18:21 发布

转载最新推荐文章于 2025-06-14 17:18:21 发布 · 1.2w 阅读

20 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/yongdongma/p/10434783.html

文章标签：

#前端 #python #ViewUI

本文介绍了一种解决前端页面form表单无法居中显示的问题，通过在外层使用div包裹并设置宽度和文本对齐方式，成功实现了表单的居中布局。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在进行前端页面设置的时候，发现写完的form表单始终无法居中显示，详细如图1所示：

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