• 技术文章 >web前端 >html教程

    html怎样将表单居中

    coldplay.xixicoldplay.xixi2021-02-20 15:21:41原创6604

    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>

    相关学习推荐:html教程

    以上就是html怎样将表单居中的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:html 表单居中
    上一篇:html定义列表标记有什么 下一篇:html中mate是单标签吗
    PHP编程就业班

    相关文章推荐

    • 三种在php程序中嵌入html代码的方法• html怎么转换成pdf• 如何将json转换成html格式• 如何将多个html文件合并一个文件• html怎么实现二级选项卡• html怎么让超链接没有下划线

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网