CSS无法让输入框和密码输入框，按钮对齐解决方法总结教程
其实有3中方法进行解决问题：1.强制文本框和按钮的高度。 这个就要知道CSS的属性了！其实也不用精确的指定位置 那样代码也比较多
img元素的css有个vertical-align属性 用来控制图片的对齐方式
它的默认值是baseline 这样图片的底部会对齐文本的baseline 而且文本的baseline并不是文本的底部 input又正巧是放文字用的 所以img默认并不会对齐input的中线
所以解决这个问题就可以直接设置图片以middle方式对齐就可以了 如:
<input type="image" style="vertical-align: middle;" src="" />但是我测试过后发现高度强制后就不要用vertical-align属性！切记！
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<style type="text/css">
.wenbenkuang {
height: 18px;
width: 120px;
border: 1px solid #FF0000;
}
.anniu {
height: 18px;
width: 48px;
border: 1px solid #FF0000;
}
</style>
</head>
<body>
<table width="180" height="50" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<form name="form1" method="post" action=""><td><table width="180" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><input name="textfield2" type="text" class="wenbenkuang">
<input type=image src=upload/2013/1/201301251041218333.gif width="42" height="18" name="image"></td>
</tr>
</table> </td>
</form>
</tr>
</table>
</body>
</html>
2.采用绝对定位方式
<style type="text/css">
.m {
height: 18px;
width: 120px;
border: 1px solid #ff0000;
position: relative;
left: 10px;
top: 2px;
float: left;
}
.n {
height: 18px;
width: 42px;
position: relative;
left: 15px;
top: 2px;
}
</style>
<body>
<table width="200" height="50" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td>
<input type="text" class="m"></input>
<input class="n" type=image src=upload/2013/1/201301251041218333.gif></input>
</td>
</tr>
</table>
</body>
3.采用表格td进行嵌套解决问题。
<tr>
<td><input name="textfield2" type="text" class="wenbenkuang"> </td>
<td><input type="image" src="upload/2013/1/201301251041218333.gif" width="42" height="18" name="image" border="0"></td>
</tr>
1.input 文本框 文字垂直居中对齐
表单默认input文本框文字并不垂直居中而在顶端，如何调整呢，可以通过css来调整垂直高度，代码演示如下
<input type="text" style="font-size:12px;line-height:45px; height:50px;" value="www.gdhaoyou.com"/>
height: 设置input样式的高度，line-height:设置input里文字的行高度heigth和line-height两项必需同时设置，才能生效！
一般来说height和line-height的值 height的值要稍稍大一些。但是上述方法在firefox中无效，如何实现在ie和firefox下文字都垂直居中呢？可以不用line-height，代码演示如下：
<input type="text" style="font-size:12px;padding-top:15px; height:50px;" value="www.gdhaoyou.com"/>
2.input 文本框 文字垂直居中对齐
在ie中文字垂直居中对齐的话:
在css中把line-height的属性设置成height的高度即可。
可能有的浏览器如此设置依然不居中，此时可以使用padding属性。
如果文本框有背景图片的话就会向下凸出一块，此时可以把max-height值设为height的值。
3.input文本框、文字、按钮、图片 垂直居中对齐的解决办法
当我们在做用户注册、登陆及搜索表单时，经常碰到文字、文本框、图片、按钮在一行时不能垂直居中对齐，本人今天遇到类似的问题，解决办法是把form里面的表单元素设置vertical-align:middle；属性就OK，实例如下：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>input 垂直居中对齐</title>
<style type="text/css">
*{ padding:0; margin:0; }
/* =search */
.search{ position:absolute; top:46px; right:49px; text-align:right; }
.search input{ vertical-align:middle; }
.searchkey{ width:248px; height:14px; *height:20px; _height:20px; line-height:20px; padding:6px 4px;*padding:3px 4px;_padding:3px 4px; background:#fdfdfd; border:1px solid #d4d6cb; }
</style>
</head>
<div class="search">
<form action="#" method="get" name="g3unionform">
<img src="/item/5cbdee023bc133523912bbc4.jpg" width="35" height="28" />
<input name="searchkey" type="text" class="searchkey" />
<input name="subm" type="image" src="images/g3union_07.gif" />
</form>
</div>
<body>
</body>
</html》不过今天总算是解决了多久没有解决的问题了！
QQ空间
腾讯微博
腾讯朋友分类：东莞网站设计与美工荟萃| 发布：admin| 查看： | 发表时间：2013-1-25
原创文章如转载，请注明：转载自东莞电子商务 http://www.gdhaoyou.com/
本文链接：http://www.gdhaoyou.com/post/sechjc.html
相关文章
◎欢迎参与讨论，请在这里发表您的看法、交流您的观点。