图片垂直居中的使用技巧
作者:blank 来源:蓝色理想 发布时间:2008-05-28 12:45:00
在曾经的 淘宝UED 招聘 中有这样一道题目:
“使用纯CSS实现未知尺寸的图片(但高宽都小于200px)在200px的正方形容器中水平和垂直居中。”
当然出题并不是随意,而是有其现实的原因,垂直居中是 淘宝 工作中最常遇到的一个问题,很有代表性。
题目的难点在于两点:
垂直居中;
图片是个置换元素,有些特殊的特性。
至于如何解决,下面是一个权衡的相对结构干净,CSS简单的解决方法:
.box {
/*非IE的主流浏览器识别的垂直居中的方法*/
display: table-cell;
vertical-align:middle;
/*设置水平居中*/
text-align:center;
/* 针对IE的Hack */
*display: block;
*font-size: 175px;/*约为高度的0.873,200*0.873 约为175*/
*font-family:Arial;/*防止非utf-8引起的hack失效问题,如gbk编码*/
width:200px;
height:200px;
border: 1px solid #eee;
}
.box img {
/*设置图片垂直居中*/
vertical-align:middle;
}
<div class="box">
<img src="http://pics.taobao.com/bao/album/promotion/
taoscars_180x95_071112_sr.jpg" />
</div>
当然还有其他的解决方法,在此不深究,有兴趣的可以阅读下:
《Vertical centering using CSS》
《Vertical centering using CSS》(标题和上同,内容不同)
猜你喜欢
- 阅读上一篇:FrontPage2002简明教程七:HTML在FrontPage中的应用 FrontPage 2002比起以前版本的FronP
- 1、并双击新建工程窗口中ActiveX DLL图标,VB将自动为项目添加一个类模块,并将该项目类型设置为ActiveX DLL。2、在属性窗
- 好多次在不同场合,都听到有同行提到“做产品比做设计更有前途”,或者“别做设计了,做产品吧”类似的观点。我不认为它们之间有什么可比性,因为这么
- 在ASP.NET中,如何连接 SQLServer数据库?连接数据库:<%@ Import Namespace=&q
- 【原文地址】Tip/Trick: Url Rewriting with ASP.NET 【原文发表日期】 Monday, February
- 如何向前端推送用户请求的信息?postinfo.htm<head><title>asp教程之回应用户请求信息&nbs
- 小编语:小编我最早使用的网页制作工作就是FrontPage啦,FrongPage方便简单,会用Word就能做网页。如果你对网页制作要求不高,
- 如果一张表的数据达到上百万条,用游标的方法来删除简直是个噩梦,因为它会执行相当长的一段时间…… 开发人员的噩梦——删
- 目前SQL INJECTION的攻击测试愈演愈烈,很多大型的网站和论坛都相继被注入。这些网站一般使用的多为SQL SERVER数据库,正因为
- A.动态页面第一步:创建转向控制页面,创建网站默认的首页文件(通常为"index.asp"或"default.
- Opera, 作为 A-Grade 浏览器,在现在的前端开发中务必支持。它很优秀,很不幸,bug是每个浏览器都不可避免的问题,Opera亦难
- Microsoft建立了一种既灵活又强大的安全管理机制,它能够对用户访问SQL Server服务器系统和数据库的安全进行全面地管理。按照本文
- 在这篇asp之数学函数里,我们将会以表格的形式,让大家了解到关于ASP中能用到的数学函数,里面包括一个数的绝对值、一个数的平方根
- 什么是F型浏览?2006年4月,美国长期研究网站可用性的著名网站设计师杰柯柏·尼尔森(Jakob Nielsen)发表了一项《眼球轨迹的研究
- 一。首先,添加如下存储过程CREATE PROCEDURE dbo.ChangeObjectOwner @Ol
- 相信有很多人有用程序向Excel导数据的需求, 且做过. 一般导出一些文本数据是很方便的, 可选方法很多, 比如拼接文本字符串存.cvs格式
- 声明定位元素:position属性值设置除默认值static以外的元素,包括relative,absolute,fixed。平台:win/I
- 公司客户在使用网站后台编辑添加修改内容时,经常是直接从word文档里复制内容到编辑器里后就提交。结果是在内容显示页面上是五花八门的样式,有时
- 原型扩展:>> String.prototype :String对象原型扩展 --------------
- 靓丽的网页是怎样生成的?也许您会脱口而出,当然是自己设计出来的。没错!不过这其中也有网页制作工具的一部分功劳,因为功能强大的网页制作工具可以