input文本框垂直居中是一个小小的难题,如果采用正确的办法,那么肯定可以实现,如果没有好的办法,那么input文本框垂直居中是很难实现的。广州网站设计公司提供如下的方法,可以实现该效果。
下面代码可以直接放到HTML里面运行,不过没有将CSS和代码完全分离。
<style type="text/css">
.div1{
border: 1px solid #CCC;
width:1001px;/*这里是大容器的宽度,实际可调*/
height:50px;
margin:auto;
display: table;/*以表格的方式显示DIV,很实用*/
*position: relative;
overflow: hidden;
}
.div2 {
vertical-align: middle;
display: table-cell;
*position: absolute;
*top: 50%;
}
.div3 {
*position: relative;
*top: -50%;
float:right;
padding-right:10px;
}
</style>
<title>用css让input垂直居中的方法</title>
</head>
<body><br /><br /><br />
<div class="div1">
<div class="div2">
<form action="search.php" name="formsearch">
<div class="div3">
<input name="textfield" type="text" size="30">
</div>
</form>
</div>
</div>
运行之后,我们就看到了input文本框垂直居中了。