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
相关文章
- 让position:fixed在IE6下可用!
/*让position:fixed在IE6下可用!*/ .fixed-top/*头部固定*/{position:fixed;bottom:auto;top:0px;} .fixed-bottom/*底部固定*/{position:fixed;bottom:0px;top:auto;} .fixed-left/*左侧固定*/{position:fixed;right:auto;left:0px;} .fixed-right/*右侧固定
- Zepto.js手机页面上替代jQuery的最佳Javascript库
Zepto.js手机页面上替代jQuery的最佳Javascript库,Zepto是现代的浏览器最大程度上与jQuery兼容的API,简约的JavaScript库 ,如果你使用jQuery,你已经知道如何使用的Zepto。 虽然100%的jQuery覆盖率不是一个设计目标, 提供的API相匹配的jQuery的同行 。
- 仿站小工具 V6.0
仿站小工具介绍: 仿站小工具是通过网址下载静态网页的工具。从输入的网址下载html代码,提取出JS、Css、Image、Picture、Flash等静态文件网址,再从下载完好的Css代码中提取出Image静态文件网址,通过网址下载静态文件,根据软件设置好的保存规则,自动修正
- 假503错误页面,伪装503错误,503.js代码下载
在一些特殊情况下,我们需要将我们的网站展现给访客看时是打不开的状态,但是并不希望关闭网站,因为直接关站,会影响搜索引擎的收录。 那么利用下面提供的代码就可以轻松实现这种需求。 代码打包下载: 503.js代码下载 压缩包中主要文件: 503.html 复制代
- JS屏蔽错误代码
JS屏蔽错误代码,防止网页上的某些JS代码运行错误导致网页无法正常打开的问题。 复制代码 代码如下: script type=text/javascript function killerrors(){ return true; } window.onerror = killerrors; /script 将这段代码添加到其他JS代码之前才能起到效果
随机推荐
- 让position:fixed在IE6下可用!
/*让position:fixed在IE6下可用!*/ .fixed-top/*头部固定*/{position:fixed;bottom:auto;top:0px;} .fixed-bottom/*底部固定*/{position:fixed;bottom:0px;top:auto;} .fixed-left/*左侧固定*/{position:fixed;right:auto;left:0px;} .fixed-right/*右侧固定
- Zepto.js手机页面上替代jQuery的最佳Javascript库
Zepto.js手机页面上替代jQuery的最佳Javascript库,Zepto是现代的浏览器最大程度上与jQuery兼容的API,简约的JavaScript库 ,如果你使用jQuery,你已经知道如何使用的Zepto。 虽然100%的jQuery覆盖率不是一个设计目标, 提供的API相匹配的jQuery的同行 。
- 仿站小工具 V6.0
仿站小工具介绍: 仿站小工具是通过网址下载静态网页的工具。从输入的网址下载html代码,提取出JS、Css、Image、Picture、Flash等静态文件网址,再从下载完好的Css代码中提取出Image静态文件网址,通过网址下载静态文件,根据软件设置好的保存规则,自动修正
- 假503错误页面,伪装503错误,503.js代码下载
在一些特殊情况下,我们需要将我们的网站展现给访客看时是打不开的状态,但是并不希望关闭网站,因为直接关站,会影响搜索引擎的收录。 那么利用下面提供的代码就可以轻松实现这种需求。 代码打包下载: 503.js代码下载 压缩包中主要文件: 503.html 复制代
- JS屏蔽错误代码
JS屏蔽错误代码,防止网页上的某些JS代码运行错误导致网页无法正常打开的问题。 复制代码 代码如下: script type=text/javascript function killerrors(){ return true; } window.onerror = killerrors; /script 将这段代码添加到其他JS代码之前才能起到效果