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

    html怎样将表单居中

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

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

    本文原创发布php中文网,转载请注明出处,感谢您的尊重!
    专题推荐:html 表单居中
    上一篇:html定义列表标记有什么 下一篇:html中mate是单标签吗
    第15期线上培训班

    相关文章推荐

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

    全部评论我要评论

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

    PHP中文网