INPUT在DIV实现垂直居中一法,兼容所有主流浏览器
成功志
INPUT在DIV实现垂直居中一法,兼容所有主流浏览器
2013-5-29 ok12

<!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=gb2312" />

<title>input在DIV实现垂直居中一法,兼容所有主流浏览器</title>

<style type="text/css">     

body{font-size:12px;}  

.lanrentuku1{

border: 1px solid #CCC;

width:1120px;

height:40px;

margin:auto;

display: table;  

*position: relative;  

overflow: hidden; 

}  

              

.lanrentuku2 {

vertical-align: middle;

display: table-cell;

*position: absolute;

*top: 50%;

}

        

.lanrentuku3 {

*position: relative;

*top: -50%;

float:right;

padding-right:10px;

}  

</style>

</head>


<body><br /><br /><br />

示例如下:

<div class="lanrentuku1"> 

 <div class="lanrentuku2"> 

  <form action="search.php" name="formsearch">

   <div class="lanrentuku3">

   <input name="textfield" type="text" size="30">

   </div>

  </form>

 </div> 

</div> 

</body>

</html>

发表评论:
昵称

邮件地址 (选填)

个人主页 (选填)

内容