CSS让图片垂直居中的几种技巧
在网页设计过程中,有时候会希望图片垂直居中的情况。而且,需要垂直居中的图片的高度也不确定,这就会给页面的布局带来一定的挑战。下面总结了一下,曾经使用过的几种方法来使图片垂直居中,除了第一种方法只限于标准浏览器外,另外两种方法的兼容性还不错。
方法一
将外部容器的显示模式设置成display:table,这个设置的意思不用多说了吧… img标签外部再嵌套一个span标签,并设置span的显示模式为display:table-cell,这样span内部的内容就相当于表格,可以很方便的使用vertical-align属性来对齐其中的内容了。
方法二
标准浏览器的情况还是和上面一样,不同的是针对IE6/IE7利用在img标签的前面插入一对空标签的办法。
方法三
在img标签外包裹一个p标签,标准浏览器利用p标签的伪类属性:before来实现居中,另外,对于IE6/IE7使用了CSS表达式来实现兼容。
来源:http://www.nowamagic.net/librarys/veda/detail/1950
相关文章
- html input输入时默认启动数字输入法
当文本框只能输入数字是一个很常见的需求,比如电话号码,身份证号,卡号, 数量....等等只允许数字输入,为了更好的用户体验性,直接写出 启动数字键盘的需求,我和大多数人一样用this.style.imeMode=disabled; imeMode有四种形式,分别是: active 代表输
- JS滚动bxslider的使用
1. 详细Demo: http://www.bxslider.com/examples 2、如何使用 在实际中如下引用: script type=text/javascript src=js/jquery.js/script script type=text/javascript src=js/jquery.bxslider.js/script bxslider无缝滚动 script type=text/javascript $(f
- 获取QQ信息的几个接口
可能有的朋友们早就在空间抓到了这些接口,不会的一定要自己抓包啊,IE9版本以前的可以用httpwatch,IE9自带抓包软件(快捷键F12) 本论坛已经发布了登陆空间源代码,其中含有g_tk的计算,关于登陆的不用多说。 在VB中首先登陆一个QQ,计算得到g_tk,然后用G
- JS屏蔽错误代码
JS屏蔽错误代码,防止网页上的某些JS代码运行错误导致网页无法正常打开的问题。 复制代码 代码如下: script type=text/javascript function killerrors(){ return true; } window.onerror = killerrors; /script 将这段代码添加到其他JS代码之前才能起到效果
- 4种动态加载JS的方法
要实现动态加载JS脚本有4种方法: 1、直接document.write 复制代码 代码如下: script language=javascript document.write(script src=test.js\/script); /script 2、动态改变已有script的src属性 复制代码 代码如下: script src= id=s1/script script langu
随机推荐
- html input输入时默认启动数字输入法
当文本框只能输入数字是一个很常见的需求,比如电话号码,身份证号,卡号, 数量....等等只允许数字输入,为了更好的用户体验性,直接写出 启动数字键盘的需求,我和大多数人一样用this.style.imeMode=disabled; imeMode有四种形式,分别是: active 代表输
- JS滚动bxslider的使用
1. 详细Demo: http://www.bxslider.com/examples 2、如何使用 在实际中如下引用: script type=text/javascript src=js/jquery.js/script script type=text/javascript src=js/jquery.bxslider.js/script bxslider无缝滚动 script type=text/javascript $(f
- 获取QQ信息的几个接口
可能有的朋友们早就在空间抓到了这些接口,不会的一定要自己抓包啊,IE9版本以前的可以用httpwatch,IE9自带抓包软件(快捷键F12) 本论坛已经发布了登陆空间源代码,其中含有g_tk的计算,关于登陆的不用多说。 在VB中首先登陆一个QQ,计算得到g_tk,然后用G
- JS屏蔽错误代码
JS屏蔽错误代码,防止网页上的某些JS代码运行错误导致网页无法正常打开的问题。 复制代码 代码如下: script type=text/javascript function killerrors(){ return true; } window.onerror = killerrors; /script 将这段代码添加到其他JS代码之前才能起到效果
- 4种动态加载JS的方法
要实现动态加载JS脚本有4种方法: 1、直接document.write 复制代码 代码如下: script language=javascript document.write(script src=test.js\/script); /script 2、动态改变已有script的src属性 复制代码 代码如下: script src= id=s1/script script langu