您现在的位置:主页 > 网站制作 > XHTML标准 >

网页制作实例:图片真正居中的方法

来源:新2备用网址hg622.com|首页吧 责任编辑:Jzq8 发表时间:2011-12-22 点击:次

由于最近的项目可能会用到这个方案,所以把一些常用的方法都收集整理了一下。

下图是理想中的效果图,外部容器的宽度和高度是固定的,中间的图片宽度和高度未知,但是图片要始终要相对于外部的容器垂直居中。

但是实际中实现的效果并不是很完美,由于各浏览器的解析都各不相同,所以各浏览器都会有1px-3px的偏差。

方法一 (XHTML 1.0 transitional):

该方法是将外部容器的显示模式设置成display:table,img标签外部再嵌套一个span标签,并设置span的显示模式为display:table-cell,这样就可以很方便的使用vertical-align象表格元素那样对齐了,当然这只是在标准浏览器下,IE6/IE7还得使用定位。

HTML结构部分:

?


???

?

CSS样式部分:

?


?

方法二 (XHTML 1.0 transitional):

方法二和方法一的实现的原理大同小异,结构也是相同的,方法一用的是条件注释,方法二就用的CSS Hack。

CSS样式部分:

?

?

该方法有个弊端,在标准浏览器下由于外部容器#box的显示模式为display:table-cell,所以导致#box无法使用margin属性,并且在IE8下设置边框也无效。

发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
验证码:点击我更换图片 匿名?

今日头条

更多>>

推荐图文

  • 网页制作实例:图片真正居中的方法
  • 网站程序员如何应对web标准
  • 展示网站特色:大字体的网页设计风格
  • HTML代码示例:可以搞死任何版本的IE
  • WEB标准中细线表格的实现方法
  • 网页制作需掌握的6种能力
  • 用标准件的方式来组装网页DIV布局
  • 符合Web标准!CSS同比例缩小图片
  • 论述HTML5代码将带来的好与坏
Alexa - 客户服务 - 联系方法 - 招聘信息 - 友情链接 - 网站地图 - TAG标签 - RSS订阅
Copyright ? 2010-2012 JZQ8.COM. 新2备用网址hg622.com|首页吧|新2备用网址hg622.com|首页去吧 版权所有
冀ICP备09002514号
冀ICP备09002514号 网络报警 企业法人营业执照 中国互联网协会 支付宝付款 网银在线付款