css样式让input垂直居中

css代码:

 .div1{
border: 1px solid #CCC;
width:1120px;
height:40px;
margin:auto;
display: table;
*position: relative;
overflow: hidden;
}
.div2 {
vertical-align: middle;
display: table-cell;
*position: absolute;
*top: 50%;
}
.div3 {
*position: relative;
*top: -50%;
float:right;
padding-right:10px;
}

html代码:

<div class="div1">
<div class="div2">
<div class="div3">
<input type="text" size="30">
</div>
</div>
</div>

  

css样式让input垂直居中的更多相关文章

  1. css样式之vertical-align垂直居中的应用

    css样式之vertical-align垂直居中的应用:将图片垂直左右居中 元素垂直居中 1:必须给容器父元素加上text-align:center 2:必须给当前元素转换成行内块元素,display ...

  2. css样式之input输入框默认样式

    帮朋友写个简单的课程设计,后面会贴出来,项目刚开始就遇到一个坑(给input输入框设定样式,但是,点击后会出现蓝色边框),之前写其他的项目时也遇到过,百度一下资料解决了,现在又碰到了,写一下,留着备用 ...

  3. CSS样式 vertical-align:middle 垂直居中生效情况

    vertical-align:middle  是依赖div内子元素最高的行高来实现对某元素居中的 -------不存在浮动时可以直接生效垂直居中 HTML .box1{ display: table- ...

  4. css样式水平居中和垂直居中的方法

    水平居中(包含块中居中) 1. 定宽,左右margin为auto.(常规流块盒.弹性项目[不用定宽]) 例子:在box1盒子上设置宽,再设置margin:auto: <style> .bo ...

  5. jQuery选择器ID、CLASS、标签获取对象值、属性、设置css样式

    jQuery是继prototype之后又一个优秀的Javascrīpt框架.它是轻量级的js库(压缩后只有21k) , 它兼容CSS3,还兼容各种浏览器 (IE 6.0+, FF 1.5+, Safa ...

  6. [JQuery] jQuery选择器ID、CLASS、标签获取对象值、属性、设置css样式

    reference : http://www.suyunyou.com/aid1657.html jQuery是继prototype之后又一个优秀的Javascrīpt框架.它是轻量级的js库(压缩后 ...

  7. (转载)CSS分别设置Input样式(按input类型)

    (转载)http://www.uml.org.cn/html/201207202.asp   当你看到<input>这个html标签的时候,你会想到什么?一个文本框?一个按钮?一个单选框? ...

  8. CSS分别设置Input样式(按input类型)

    当你看到<input>这个html标签的时候,你会想到什么?一个文本框?一个按钮?一个单选框?一个复选框?……对,对,对,它们都对.也许你可能想不到,这个小小的input竟然可以创造出10 ...

  9. 文字在div中水平和垂直居中的的css样式

    文字在div中水平和垂直居中的的css样式 text-align:center; /*水平居中*/ line-height: 20px; /*行距设为与div高度一致*/ 示例如下: HTML元素 & ...

随机推荐

  1. jQuery的属性

    The Write Less , Do More ! jQuery的属性 1. attr(name|properties|key,value|fn) : 设置或返回被选元素的属性值 ①获取属性 < ...

  2. 微信小程序IDE(微信web开发者工具)安装、破解手册

    1.IDE下载 微信web开发者工具,本人是用的windows 10 x64系统,用到以下两个版本的IDE安装工具与一个破解工具包: wechat_web_devtools_0.7.0_x64.exe ...

  3. iOS UITableView 与 UITableViewController

    很多应用都会在界面中使用某种列表控件:用户可以选中.删除或重新排列列表中的项目.这些控件其实都是UITableView 对象,可以用来显示一组对象,例如,用户地址薄中的一组人名.项目地址. UITab ...

  4. GIT笔记命令行(1)

    Git简单易用,只要输入git就可以列出他的所有参数 C:\Users\spu>git usage: git [--version] [--help] [-C <path>] [-c ...

  5. Git快速入门

    如果你不想看长篇的Git教程,想快速了解Git的使用,那么本文可能会对你入门Git有所帮助.由于笔者用的是Windows系统,所以本文只写Git在Windows上的使用. 一.Git安装 去Git官网 ...

  6. Linux下编译安装Vim8.0

    什么是Vim? Vim 是经典的 UNIX 编辑器 Vi 的深度改良版本.它增加了许多功能,包括:多级撤销.格式高亮.命令行历史.在线帮助.拼写检查.文件名补完.块操作.脚本支持,等等.除了字符界面版 ...

  7. js格式化日期

    /** *对日期进行格式化, * @param date 要格式化的日期 * @param format 进行格式化的模式字符串 * 支持的模式字母有: * y:年, * M:年中的月份(1-12), ...

  8. TCP三次握手图解

  9. 关于Java中进程和线程的详解

    一.进程:是程序的一次动态执行,它对应着从代码加载,执行至执行完毕的一个完整的过程,是一个动态的实体,它有自己的生命 周期.它因创建而产生,因调度而运行,因等待资源或事件而被处于等待状态,因完成任务而 ...

  10. Jquery对网页高度、宽度的操作

    Jquery获取网页的宽度.高度 网页可见区域宽: document.body.clientWidth 网页可见区域高: document.body.clientHeight 网页可见区域宽: doc ...