html怎样将表单居中

时间2024-01-29 10:49:03发布访客分类JavaScript浏览158

导读：收集整理的这篇文章主要介绍了html怎样将表单居中，觉得挺不错的，现在分享给大家，也给大家做个参考。htML将表单居中的方法：首先表单外面加一个父标签fa；然后表单加一个类centered，代码为【<form name="seArch...

收集整理的这篇文章主要介绍了html怎样将表单居中，觉得挺不错的，现在分享给大家，也给大家做个参考。

htML将表单居中的方法：首先表单外面加一个父标签fa；然后表单加一个类centered，代码为【

form name="seArch"method="post" action="#" class=“”“】。

本教程操作环境：windows7系统、html5版，DELL G3电脑，该方法适用于所有品牌电脑。

html将表单居中的方法：

表单宽高不固定情况下，表单外面加一个父标签fa，表单加一个类centered

body>
       div class="fa">
        form name="search" method="post" action="#" class="centered">
           input value="请输入关键词" tyPE="text" name="q" />
           input type="submIT" value="搜索"/>
        /form>
    /div>
    /body>

清除页面默认样式后(margin padding)

style type="text/css">
 html,body{
    width: 100%;
    height: 100%;
}
.fa {
    text-align: center;
    height: 100%;
}
.fa:before {
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}
.centered {
    display: inline-block;
    vertical-align: middle;
    background: red;
    width: auto;
}
    /style>