收藏 分站 简化版 股指 预订
日历 地图 计算器 行情 电脑
影视 携程 导购 WAP 排行
首页 软件 源码 网络 窍门 笑话 知识 公告 注册 登录 用QQ登录本站
全部 综合数码金融娱乐服务报刊政府机构 推荐 申请 友情  
您现在的位置:首页 >> CSS >> 内容

CSS设置图片在容器居中的方法

内容摘要:网站排版时如果应用了表格,那么设置单元格为align='center'就可以使其中的一切内容居中。如果没有应用表格要想设置图片居中就有点困难了。困难来自不按'常规出牌'的浏览器。按照CSS标准,只要设置了图片容器的CSS属性为 display:table-cell;vertical-align:middle;text-align:center;就可以使图片居......

  网站排版时如果应用了表格,那么设置单元格为align="center"就可以使其中的一切内容居中。如果没有应用表格要想设置图片居中就有点困难了。困难来自不按"常规出牌"的浏览器。按照css标准,只要设置了图片容器的css属性为 display:table-cell;vertical-align:middle;text-align:center;就可以使图片居中了。这个方法在firefox chrome opera safari都生效,因为它们是标准浏览器。而在ie中就是不行,ie它最牛了。以下是通过ie hack解决这个问题的方法:

<style>

;; .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;

;; }

</style>

  版权声明:本内容来源于互联网,如有侵犯您的版权,请联系站长,本站收到您的信息后将及时处理。


发布日期:2012/7/22 发布时间:12:38:43 点击:1001 录入:齐天大圣
  • 上一篇:CSS常用技巧之一 禁止文字自动换行
  • 下一篇:表格隔行换色、荧光棒、全选反选效果
  • 本类新增
    本类热门文章
    壹 家 软 件 工 作 室(YiJia SoftWare Workroom) 齐天大圣® 制 作 ©2000-2017

    最佳1024*768浏览
    闽ICP备05000814号-1
    YJCMS V1.7 Build 17.1.11

    本空间由力天互联提供