html表单怎么居中!~

html表单怎么居中!~,第1张

表单宽高不固定情况下,表单外面加一个父标签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: centerheight: 100%}

.fa:before {content: ''display: inline-blockheight: 100%vertical-align: middle}

.centered {display: inline-blockvertical-align: middlebackground: redwidth: auto}

</style>

<STYLE type="text/css">

#login{

width:400px

height:280px

position:absolute

left: 50%

top: 50%

margin-left:-200px

margin-top:-140px

border:1px

background-color:red

align:center

}

#form{

width:300px

height:160px

position:relative

left:50%

top:50%

margin-left:-150px

margin-top:-80px

}

</STYLE>

</head>

<body>

<div id="login">

<div id="form">

<s:form action="" >

<s:textfield name="username" label="用户名" ></s:textfield>

<s:password name="password" label="密码" ></s:password>

<s:select list="{}" listKey="1" listValue="1" label="用户类型"></s:select>

<tr align="center">

<td colspan="2" align="center" valign="middle">

<s:submit value="登录" theme="simple"></s:submit>

<s:reset value="重置" theme="simple"></s:reset> </td>

</tr>

</s:form>

</div>

</div>

</body>

</html>

原理就是使用两个div,一个是绝对定位,一个是相对定位,绝对定位用于控制在浏览器中位置;相对定们的div把表单包起来,控制让其居中。

设置html 表单按钮的位置的代码是:

<tr>

<td><input type="submit" value="注册">

<input type="reset" value="重置"></td>

</tr>

超文本标记语言, 标准通用标记语言下的一个应用。

“ 超文本 ”就是指页面内可以包含图片、 链接,甚至音乐、 程序等非文字元素。

超级文本标记语言文档制作不是很复杂,但功能强大,支持不同数据格式的 文件镶入,这也是万维网( WWW)盛行的原因之一,其主要特点如下:

简易性:超级文本标记语言 版本升级采用 超集方式,从而更加灵活方便。

可扩展性:超级文本标记语言的广泛应用带来了加强功能,增加 标识符等要求,超级文本标记语言采取子类元素的方式,为系统扩展带来保证。

平台无关性:虽然 个人计算机大行其道,但使用 MAC等其他机器的大有人在,超级文本标记语言可以使用在广泛的平台上,这也是 万维网( WWW)盛行的另一个原因。

通用性:另外, HTML是网络的通用语言,一种简单、通用的全置标记语言。它允许网页制作人建立文本与图片相结合的复杂页面,这些页面可以被网上任何其他人浏览到,无论使用的是什么类型的电脑或浏览器。


欢迎分享,转载请注明来源:内存溢出

原文地址:https://54852.com/zaji/7065374.html

(0)
打赏 微信扫一扫微信扫一扫 支付宝扫一扫支付宝扫一扫
上一篇 2023-04-01
下一篇2023-04-01

发表评论

登录后才能评论

评论列表(0条)

    保存