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

Comment centrer le formulaire en HTML

coldplay.xixi
coldplay.xixioriginal
2021-02-20 15:21:4125475parcourir

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 [

Comment centrer le formulaire en HTML

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