css表单如何居中显示?

css表单如何居中显示?下面本篇文章给大家介绍一下。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。

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

1.jpg

代码如下:

<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所示:

2.jpg

更多web前端知识,请查阅 HTML中文网 !!

以上就是css表单如何居中显示?的详细内容,更多请关注web前端其它相关文章!

赞(0) 打赏
未经允许不得转载:web前端首页 » CSS3 答疑

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏