未知高度的图片垂直居中
作者:雨夜带刀 来源:雨夜带刀's Blog 发布时间:2010-12-17 12:36:00
图片的宽度和高度是未知的,没有一个固定的尺寸,在这个前提下要使图片在一个固定了宽度和高度的容器中垂直居中,想想感觉还是挺麻烦的,由于最近的项目可能会用到这个方案,所以把一些常用的方法都收集整理了一下。
下图是理想中的效果图,外部容器的宽度和高度是固定的,中间的图片宽度和高度未知,但是图片要始终要相对于外部的容器垂直居中。
但是实际中实现的效果并不是很完美,由于各浏览器的解析都各不相同,所以各浏览器都会有1px-3px的偏差。
方法一 (XHTML 1.0 transitional):
该方法是将外部容器的显示模式设置成display:table,img标签外部再嵌套一个span标签,并设置span的显示模式为display:table-cell,这样就可以很方便的使用vertical-align象表格元素那样对齐了,当然这只是在标准浏览器下,IE6/IE7还得使用定位。
HTML结构部分:
<div id="box">
<span><img src="images/demo.jpg" alt=""></span>
</div>
CSS样式部分:
<style type="text/css">
#box{
width:500px;height:400px;
display:table;
text-align:center;
border:1px solid #d3d3d3;background:#fff;
}
#box span{
display:table-cell;
vertical-align:middle;
}
#box img{
border:1px solid #ccc;
}
</style>
<!--[if lte IE 7]>
<style type="text/css">
#box{
position:relative;
overflow:hidden;
}
#box span{
position:absolute;
left:50%;top:50%;
}
#box img{
position:relative;
left:-50%;top:-50%;
}
</style>
<![endif]-->
猜你喜欢
- 如要让数据库进行自动管理,则管理员需要预先定义一些可预测的管理任务以及这些任务发送的条件。当满足这些指定的条件,则数据库会自动运行管理员指定
- 用于操作数据库的SQL一般分为两种,一种是查询语句,也就是我们所说的 SELECT语句,另外一种就是更新语句,也叫做数据操作语句。言外之 意
- 在 玉伯 的文章 《一道大题目,嘿嘿》 中有这样一段代码:[] == ![]也许很多同学迷惑:咦,这个如何转换呢?首先,我们了解下逻辑 NO
- 如果是感应触发.就选onmouseover如果是点击触发.就选onclick [把它们两互相替换,就可随时变为感应
- It's well-known.Microsoft SQL Server 7.0增加了一个语句top,可以限制返回的记录数。但是在使
- <%sql = "select * from SMT_addt
- 由于众所周知的原因,ACCESS在大型站点应用中都靠不上边,主要问题就是数据量大了以后几乎无法索引。当ACCESS里数据过万后,明显可以感觉
- 上一课:ACCESS入门教程:初识Access 2000窗口接口简介 通过上一课的学习,你是否感觉Access的窗口和接口还有点搞不清楚,对
- 首先,啰嗦几句废话如下: (1)触发器(trigger)是个特殊的存储过程,它的执行并不需要我们去显式调用,而是由一些事件触发,这有点类似C
- 文本的排版依据语言的不同会有一些格式上的要求,比如简体中文中类似逗号、分号等标点符号不会出现在一行的开头,对于英文来讲就是一个完整单词不会在
- 1.获取所有数据库名: SELECT Name FROM Master..SysDatabases ORDER BY Name 2.获取所有
- 原文:http://www.smashingmagazine.com/ ... emarkable-favicons/翻译:Blank(怿飞
- 症状: 访问asp网页的时候出现如下错误:Server object error ''ASP 0178 : 80070005
- 对于SQL的Join,在学习起来可能是比较乱的。我们知道,SQL的Join语法有很多inner的,有outer的,有left的,有时候,对于
- 我认为在ASP中最好的办法是用编程实现定时刷新Cache,也就是说给Application中储存的设一个过期时间。当然,在ASP中Appli
- 在SQL Server中进行开发会让你身处险地,并且寻找快速解决方案。我们编辑了前十名关于SQL Server开发的常见问题。对常见的针对表
- ▲ SHOW执行下面这个命令可以了解服务器的运行状态mysql >show status;该命令将显示出一长列状态
- [本站原创]在我们浏览了一些网页时,经常会弹出一些信息窗口或浏览器窗口以显示一些公告内容,想知道这些窗口是怎么制作出来的吗?如果你还不曾知道
- google前不久推出了Google Ajax Library API,说白了就是提供几个知名js库的host,目前有:jQueryprot
- 有一编文章是用JavaScript对XML文件操作来实现无限级联动菜单的,我们可结合ASP来完成对数据库值的读取,然后写入XML文件,再用J