Maison > Article > interface Web > Comment centrer le formulaire en HTML

Comment centrer le formulaire en HTML

coldplay.xixioriginal: 2021-02-20 15:21:4125355parcourir

Comment centrer le formulaire en HTML : ajoutez d'abord une balise parent fa à l'extérieur du formulaire ; puis ajoutez une classe centrée au formulaire, le code est [

L'environnement d'exploitation de ce tutoriel : système windows7, version html5, DELL Ordinateur G3, cette méthode convient à Toutes les marques d'ordinateurs

Comment centrer le formulaire en HTML :

Lorsque la largeur et la hauteur du formulaire ne sont pas fixes. , ajoutez une balise parent fa à l'extérieur du formulaire et ajoutez une classe centrée sur le formulaire

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

Après avoir effacé le style par défaut de la page (remplissage de marge)

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

Recommandations d'apprentissage associées. : tutoriel HTML

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Qu'est-ce que la balise de liste de définitions HTML ?Article suivant：Qu'est-ce que la balise de liste de définitions HTML ?

Articles Liés

Voir plus