input文本框、文字、按钮、图片 垂直居中对齐的解决办法

来源:互联网 发布:拼豆软件 编辑:程序博客网 时间:2024/05/01 07:31

当我们在做用户注册、登陆及搜索表单时,经常碰到文字、文本框、图片、按钮在一行时不能垂直居中对齐,本人今天遇到类似的问题,解决办法是把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="http://hiphotos.baidu.com/wely_ton/abpic/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>

原创粉丝点击