最新消息:

DIV实现input垂直居中

Web 观测者 1633浏览

代码如下:

<!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" />
<style type="text/css">
body{
   font-size:12px;
}

.div1{
   border: 1px solid #CCC;
   width:600px;
   height:600px;
   display: table;
}

.div2{
   vertical-align: middle;
   display: table-cell;
}
</style>
<title>Demo</title>
</head>

<body>
<div class="div1">
   <div class="div2">
       <input name="textfield" type="text" size="30">
   </div>
</div>
</body>
</html>

其中关键代码是display: table;以及display: table-cell;,如果不加这两句代码设置是无效的。

转载请注明:观测者 » DIV实现input垂直居中