您好，欢迎来到源码搜藏！分享精神，快乐你我！提示：担心找不到本站？在百度搜索“源码搜藏”，网址永远不丢失！

[加入VIP] 设为首页 | 收藏本站 | 网站地图 | Sitemap | TAG标签

当前位置：首页 > 网页特效 > css样式 >

DIV实现input垂直居中兼容各浏览器

时间：2012-08-14 12:28 来源：互联网作者：admin 浏览：次收藏挑错推荐打印

<!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特效代码" />
<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>
<p align="center">代码整理：<a href="http://www.sucaiko.com/" target="_blank">站长资源库</a></p>
<p align="center">＊尊重他人劳动成果，转载请自觉注明出处！注：此代码仅供学习交流，请勿用于商业用途。</p>
</body>
</html>

运行代码保存代码复制代码提示：您可以先修改部分代码再运行，保存代码功能在Firefox下无效。

DIV实现input垂直居中兼容IE6、IE7、IE8、Firefox、Safari等浏览器。 DIV实现input垂直居中兼容各浏览器由源码搜藏网整理,转载请注明出处http://www.codesocang.com/texiao/csstx/199.html

标签：网站源码 input居中

上一篇：鼠标经过显示隐藏层

下一篇：网站变灰代码

[css样式] HTML5/CSS3画国旗-五星红旗

[css样式] 圆形按钮HTML5/CSS3 button代码H

[css样式] 多种CSS3纹理背景效果

[css样式] CSS3表格特效边框阴影+圆角有立

[css样式] CSS实现背景渐变 CSs滤镜使用

[css样式] 鼠标经过显示隐藏层

[css样式] css的margin缩写方式

[css样式] CSS圆角框，圆角提示框

[css样式] 超炫css3-rotate环形旋转特效有

[css样式] 让div居中对齐的css

[css样式] CSS实现的搜索框点击后提示消失

[css样式] css3轻松实现六边形

相关内容推荐

安卓网站源码

手机幻灯片

PHP开源社区

div被select遮挡

twitter精美PNG

web前端开发

关于提高网站PR

木质儿童玩具PNG图标

关于我们 | 版权声明 | 广告服务 | 联系我们 | 常见问题 | 网站地图 | 网友投稿 | 在线留言

分享精神，快乐你我！联系QQ:498277184

本站资源是从网络整理所得,如果无意侵犯了贵司版权，请与源码搜藏网联系，我们会及时处理和回复，谢谢!

鲁ICP备13013982号-1