`
android_learner
  • 浏览: 7278 次
  • 性别: Icon_minigender_2
  • 来自: 北京
社区版块
存档分类
最新评论

Div实现input垂直居中

    博客分类:
  • html
阅读更多
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>
分享到:
评论

相关推荐

    用CSS让按钮居中显示的思路及代码

    就是做到类似于下图这种效果 通过简单的Css样式就可以... 可以让你的div居中对齐。 .style{margin-left:auto;margin-right:auto;} 缩写形式为: .style{margin:0 auto;} 数字0 表示上下边距是0。可以按照需要设置成不

    JQuery&CSS;&CSS;+DIV实例大全.rar

    4.jQuery超炫淡入淡出效果DIV渐变居中弹出框插件下载 5.jquery黑色+蓝色风格DIV提示框示例 6.一款jQuery+DIV居中淡入淡出信息提示框示例 7.一款jQuery可拖动提示窗插件(对话框Dialog插件) 8.一款基于jQuery...

    html+css面试题答案.docx

    垂直水平居中是 CSS 中一个常见的问题,实现方法有很多种,以下是一种简单的实现方法: HTML 结构:&lt;div class="wrapper"&gt; &lt;div class="content"&gt;&lt;/div&gt;&lt;/div&gt; CSS:.wrapper{position:relative;}.content{...

    CSS对浏览器的兼容性性处理(IE7,6与Fireofx)

    从网上收集了IE7,6与Fireofx的兼容性处理方法并整理了一下....1.div的垂直居中问题 vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字,就垂直居中了。缺点是要控

    46种常见的浏览器兼容性问题大汇总

    9. Div的垂直居中问题 3 10. margin加倍的问题 3 11. IE与宽度和高度的问题 3 12. 页面的最小宽度 3 13. DIV浮动IE文本产生3象素的bug 3 14. IE捉迷藏的问题 3 15. float的div闭合;清除浮动;自适应高度 3 16....

    Web前端与移动开发之复合选择器 css元素显示模式 背景属性.txt

    文字的行高line-height=盒子高度 仅限于单行文字垂直居中 3.css的背景属性 (1)背景颜色 选择器{ background-color: transparent透明(透明)/color; } (2)背景图片(便于控制位置) 常用于logo 装饰性...

    html入门到放弃笔记

    增加一根水平线,size为5px,宽度为50%,居中对齐,颜色为红色(red) 7、预格式化 作用:保留源文档中的回车 和 空格 的作用 &lt;pre&gt;&lt;/pre&gt; 8、分区元素 1、块分区元素 语法:&lt;div&gt;&lt;/div&gt; 作用:布局 2、行内...

    《程序天下:JavaScript实例自学手册》光盘源码

    3.36 文字的垂直滚动 3.37 文字幻灯片 3.38 随机动态文字效果 3.39 实现textarea的自动滚动 3.40 使用marquee实现文字上下滚动 3.41 类似安装效果的textarea滚动 3.42 始终显示在最顶端的文本 3.43 JavaScript过滤...

    程序天下:JavaScript实例自学手册

    3.36 文字的垂直滚动 3.37 文字幻灯片 3.38 随机动态文字效果 3.39 实现textarea的自动滚动 3.40 使用marquee实现文字上下滚动 3.41 类似安装效果的textarea滚动 3.42 始终显示在最顶端的文本 3.43 JavaScript过滤...

    从入门到精通HTML5——PDF——网盘链接

     3.3.5 居中对齐标记——center 54  3.3.6 向右缩进标记——blockquote 55  3.4 水平线标记 56  3.4.1 添加水平线——hr 56  3.4.2 设置水平线的宽度与高度  ——width、height 57  3.4.3 设置水平线的颜色...

    精通JavaScript

    • 11.8.htm JavaScript实现事件控制器 • 11.9.htm 元素属性综合应用 • 11.10.htm 动态修改表单元素内容 第12章(\第12章) • 12.1.htm Document树的简单例子 • 12.2....

    精通javascript

    • 11.8.htm JavaScript实现事件控制器 • 11.9.htm 元素属性综合应用 • 11.10.htm 动态修改表单元素内容 第12章(\第12章) • 12.1.htm Document树的简单例子 • 12.2....

    privateprivateprivateprivate

    //把垂直对齐方式指定为居中 //format1.setVerticalAlignment(jxl.format.VerticalAlignment.CENTRE); //设置自动换行 //format1.setWrap(true); //添加一个工作表 WritableSheet sheet = book....

    private2private2private2

    //把垂直对齐方式指定为居中 //format1.setVerticalAlignment(jxl.format.VerticalAlignment.CENTRE); //设置自动换行 //format1.setWrap(true); //添加一个工作表 WritableSheet sheet = book.getSheet(0)...

Global site tag (gtag.js) - Google Analytics