Rumah > Artikel > hujung hadapan web > html怎样将表单居中

html怎样将表单居中

coldplay.xixiasal: 2021-02-20 15:21:4125354semak imbas

html将表单居中的方法：首先表单外面加一个父标签fa；然后表单加一个类centered，代码为【

html怎样将表单居中

本教程操作环境：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: &#39;&#39;;display: inline-block;height: 100%;vertical-align: middle;}
.centered {display: inline-block;vertical-align: middle;background: red;width: auto;}
</style>

相关学习推荐：html教程

Atas ialah kandungan terperinci html怎样将表单居中. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：html定义列表标记有什么Artikel seterusnya：html中mate是单标签吗

Artikel berkaitan

Lihat lagi