html表单怎么居中！~

<formname="search"method="post"action="#"><inputvalue="请输入关键词"type="text"name="q"/><i... <form name="search" method="post" action="#">
<input value="请输入关键词" type="text" name="q" />
<input type="submit" value="搜索"/>
</form>
怎么让我的表单手机访问，上下左右都是居中的呀！~
先谢谢各位。展开

 我来答

2个回答

#热议# 应届生在签三方时要注意什么？

能不能好好调戏
2018-08-29 · TA获得超过229个赞

知道小有建树答主

回答量：63

采纳率：0%

帮助的人：20.9万

我也去答题访问个人页

关注

展开全部

表单宽高不固定情况下，表单外面加一个父标签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>

追问

清除页面默认样式后(margin padding) 这句是啥意思?怎么用？

追答

有时候网页会自动给body div等等标签加maigin值和padding值，所以一般来说，做网页，我是习惯先把页面默认的样式清除掉。默认样式除了margin padding ，还有border list-style 。下面的那些标签，如果你页面有就写，没有就不用写

body, div, ul, li, ol, h1, h2, h3, h4, h5, h6, input, p, span, dl, dt, dd, a, img, 
button, article, aside, footer, header, hgroup, menu, nav, section, figure
{ margin: 0; padding: 0; border: none; list-style: none;}