PHP程序员小白到大牛集训(12期免息)
作者信息

coldplay.xixi

好好学习 天天向上

最近文章
重点详解Java类和对象3136
浅析php简单操作mysql锁机制5170
php无法加载mysql怎么办3509
视频教程分类
推荐视频教程
  • php程序员小白到大牛三个月集训php程序员小白到大牛三个月集训
  • Laravel 9 学习正当时—保姆级教程,想学不会都难!Laravel 9 学习正当时—保姆级教程,想学不会都难!
  • 千万级数据并发解决方案(理论+实战)千万级数据并发解决方案(理论+实战)
  • Laravel基础与实战(模块化)Laravel基础与实战(模块化)
  • UNI-APP开发(仿饿了么)UNI-APP开发(仿饿了么)
  • 首页 >web前端 >html教程 > 正文

    html怎样将表单居中

    原创2021-02-20 15:21:4112234 关注公众号:每天精选资源文章推送

    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中文网其它相关文章!

    20期PHP线上班

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。

  • 相关标签:html 表单居中
  • 相关文章

    相关视频


    专题推荐