Home >Web Front-end >HTML Tutorial >How to center the form in html

How to center the form in html

coldplay.xixiOriginal: 2021-02-20 15:21:4125494browse

htmlHow to center the form: First add a parent tag fa outside the form; then add a class centered to the form, the code is [

The operating environment of this tutorial: windows7 system, html5 version, DELL G3 computer, this method is suitable for All brands of computers.

htmlMethods to center the form:

When the width and height of the form are not fixed, add a parent tag fa outside the form, and add a class centered to the form

<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>

After clearing the default style of the page (margin padding)

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

Related learning recommendations: html tutorial

The above is the detailed content of How to center the form in html. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：What is the html definition list tag?Next article：What is the html definition list tag?

See more

How to center the form in html

Related articles