Div实现input垂直居中

最新推荐文章于 2024-09-04 12:52:05 发布

原创最新推荐文章于 2024-09-04 12:52:05 发布 · 569 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html

html 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了如何使用CSS技巧在Div元素中垂直居中输入框，兼容IE7、IE8及Firefox浏览器。

Div实现input垂直居中兼容ie7,ie8,ff?
代码：<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>

<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>