如何是HTML页面中的表单居中显示[通俗易懂]

全栈程序员-站长 • 2022年8月3日上午9:16 • 未分类 • 阅读 4

如何是HTML页面中的表单居中显示[通俗易懂]在进行前端页面设置的时候，发现写完的form表单始终无法居中显示，详细如图1所示：图1：问题图示代码如下：分析原因：form本来就只是一个表单而已，对页面根本就没有布局上的作用.，因此无论怎么设

大家好，又见面了，我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE使用 1年只要46元售后保障童叟无欺

在进行前端页面设置的时候，发现写完的form表单始终无法居中显示，详细如图1所示：如何是HTML页面中的表单居中显示[通俗易懂]

图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://javaforall.net/168350.html原文链接：https://javaforall.net

赞 (0)

全栈程序员-站长

0 0

反射型XSS案例[通俗易懂]

反射型XSS案例[通俗易懂]原理:可能存在反射型xss的功能(点):url参数,搜索框…挖掘方法:需要url中有可以修改的参数过滤方法:在后端使用函数过滤标签

全栈程序员-站长
2022年5月3日
77
EPPlus使用

EPPlus使用看看我公式计算excel中离不开各种各样的公式计算，在Epplus中运用公式有两种方式，你都可以尝试一下：worksheet.Cells[“D2:D5″].Formula=”B2*C2”;//这是乘法的公式，意思是第二列乘以第三列的值赋值给第四列，这种方法比较简单明了worksheet.Cells[6,2,6,4].Formula=string.Format(“SUBT…

全栈程序员-站长
2022年6月16日
51
使用AnalyticDB MySQL创建数据库及表过程

使用AnalyticDB MySQL创建数据库及表过程简介目标是让云上数据仓库用户及开发者通过简单的步骤体验基于AnalyticDBMySQL版和DMS构建云原生数据仓库的主要流程，场景将通过实例的开通、结构与数据的初始化、报表的开发、报表可视化等环节，用3个具体的应用场景来体验AnalyticDBMySQL版在新零售场景下的交互查询和ETL计算速度，以及通过DMS进行数据仓库数据报表开发的流程。提供的数据集是一个零售场景的模拟数据，包括客户信息、订单记录、货物信息、国家地域信息等内容，数据总量10GB，最大数据表记录数为5999万条。产品简介云原

全栈程序员-站长
2025年12月13日
5
pycharm中使用anaconda部署python环境_如何创建lamp环境

pycharm中使用anaconda部署python环境_如何创建lamp环境pycharm配合anaconda使用，在pycharm中选择anaconda创建的环境

全栈程序员-站长
2022年8月28日
4
Bozz Nuster_Collectivum XXVIII

Bozz Nuster_Collectivum XXVIII这篇文章主要讲的是在Libprotobuf-mutator与LibFuzzer联合使用的基础上，加上custommutator功能。首先需要明确的是为什么要这么做，那么假设b字段只有为”FUZZ”或”PWN”两个字符的时候才能进入下一个程序分支的情况，当然LibFuzzer也可以在代码覆盖率的加持下进入下一个程序分支，但如果你通过逆向的方式已经知道了这个关键点，难道还需要等LibFuzzer跑出这两个字符串吗？

全栈程序员-站长
2025年11月7日
3
unity3d c# 产生真正的随机数

unity3d c# 产生真正的随机数

全栈程序员-站长
2022年1月4日
59

发表回复

关注全栈程序员社区公众号