• Sitemap
  • Aboat
  • Home
logo
  • 首页
  • 关于
  • 动态
  • 文章
  • 资源
  • 网站
  • 设计
  • 数码
  • 地图
  • 链接
  • FAQ
  • BLOG
网站重构

WEB标准

  • 什么是web标准
  • 使用标准的好处
  • 怎样过渡
  • XHTML基础问答

推荐文章

·解析HTML的增强标记
·图片垂直居中的使用技巧
·display:inline-block的深入...
·w3csites网站
·web 开发技术荟萃
·网页设计师
·新增CSS在线中文手册
·第10天:自适应高度
·第9天:第一个CSS布局实例
·第8天:CSS布局入门
·第7天:CSS入门
·第6天:XHTML代码规范
·第5天:head区的其他设置
·第4天:调用样式表
·第3天:定义语言编码
·第1天:选择什么样的DOCTYPE
·CSS 常用ID,class命名
·CSS代码缩写技巧
·认识CSS中absolute与relativ...
·一个优化css的站点
·网页设计技巧:跨浏览器的CS...
图片垂直居中的使用技巧
日期:2008-6-15 | 来源:怿飞 | 作者:admin | 点击:
  • 字体大小
  • 小
  • 中
  • 大
难点在于两点:
  1. 垂直居中;
  2. 图片是个置换元素,有些特殊的特性。

至于如何解决,下面是一个权衡的相对结构干净,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》(标题和上同,内容不同)
  • 《CSS List Grid Layout》
  • 浏览工具
  • 新闻评论
  • 打印本文
  • 关闭本页
  • 返回页首

相关资源

·解析HTML的增强标记
·用CSS按比例缩放图片
·display:inline-block的深入理解
·第9天:第一个CSS布局实例
·第8天:CSS布局入门
·第7天:CSS入门


  • Copyright © 2006 Nooker.com All rights reserved. Best viewed by 1024 * 768 Ie5.0 +
  • 冀ICP备06000114号
  • 城市漫延 Webmaster:Shadow QQ:5128790