DIV中實現input垂直居中
阿新 • • 發佈：2019-02-04
<!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" /> <meta name="keywords" content="div垂直居中,div文字垂直居中,div中input垂直居中,JS特效程式碼" /> <meta name="description" content="DIV實現input垂直居中，相容IE6、IE7、IE8、Firefox、Safari。更多程式碼請訪問懶人相簿JS程式碼頻道。" /> <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> <title>DIV實現input垂直居中 相容IE6、IE7、IE8、Firefox、Safari</title> </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> <p align="center">DIV實現input垂直居中，相容IE6、IE7、IE8、Firefox、Safari。</p> </body> </html>
這裡最主要的是：
display: table;display: table-cell;float:right;