input文本框垂直居中是一個小小的難題,如果采用正確的辦法,那么肯定可以實現(xiàn),如果沒有好的辦法,那么input文本框垂直居中是很難實現(xiàn)的。廣州網(wǎng)站設(shè)計公司提供如下的方法,可以實現(xiàn)該效果。
下面代碼可以直接放到HTML里面運(yùn)行,不過沒有將CSS和代碼完全分離。
<style type="text/css">
.div1{
border: 1px solid #CCC;
width:1001px;/*這里是大容器的寬度,實際可調(diào)*/
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>
運(yùn)行之后,我們就看到了input文本框垂直居中了。