收藏本站腾讯微博新浪微博

经典论坛

 找回密码
 注册

QQ登录

只需一步,快速开始

蓝色理想 最新研发动态 网站开通淘帖功能 - 蓝色理想插件 论坛内容导读一页看论坛 - 给官方提建议

论坛活动及任务 地图和邮件任务 请多用悬赏提问 热夏来袭,选一款蓝色理想的个性T恤吧!

手机上论坛,使用APP获得更好体验 急需前端攻城狮,获得内部推荐机会 论坛开通淘帖功能,收藏终于可以分类了!

搜索
查看: 2277|回复: 19

[求助] 找高手帮忙写下这个demo

  [复制链接]
发表于 2012-4-9 22:37:31 | 显示全部楼层 |阅读模式
50体力
111.jpg

图片垂直居中显示的,兼容IE6、7、8、FF、CM等浏览器。

最佳答案

查看完整内容

我自己的测试,ie6,应该是0.9倍,ie6会使容器height+1,结合overflow:hidden 我这里没有ie7,楼主测试一下,也好写个针对ie6、ie7的hack[html] .block{width:300px; padding:10px; margin-left:50px; background-color:#CCCCCC;float:left;text-align:center;} .box{ height:200px; text-align:center; border:1px solid #000; width:300px; /* 兼容标准浏览器 */ display: table-cell; verti ...
发表于 2012-4-9 22:37:32 | 显示全部楼层
本帖最后由 yangedie 于 2012-4-10 02:40 编辑

我自己的测试,ie6,应该是0.9倍,ie6会使容器height+1,结合overflow:hidden
我这里没有ie7,楼主测试一下,也好写个针对ie6、ie7的hack

 提示:您可以先修改部分代码再运行

回复

使用道具 举报

发表于 2012-4-10 00:00:19 | 显示全部楼层
不是高手,google出来的

 提示:您可以先修改部分代码再运行

回复

使用道具 举报

 楼主| 发表于 2012-4-10 07:43:44 | 显示全部楼层
yangedie 发表于 2012-4-10 00:48
我自己的测试,ie6,应该是0.9倍,ie6会使容器height+1,结合overflow:hidden
我这里没有ie7,楼主测试一 ...

/* 字体大小约为容器高度的0.9倍 */  这个地方不是很理解.能否解释一下
回复

使用道具 举报

发表于 2012-4-10 08:00:46 | 显示全部楼层
表格好搞定吧
回复

使用道具 举报

发表于 2012-4-10 09:12:19 | 显示全部楼层
难道你不知道在这里看么:http://bbs.blueidea.com/thread-2763214-1-1.html
另外也可以看怿飞的博客,里面也有。
回复

使用道具 举报

发表于 2012-4-10 09:12:42 | 显示全部楼层
在里面插个表格,水平加垂直居中就行了,不至于这么麻烦的。
回复

使用道具 举报

 楼主| 发表于 2012-4-10 09:41:56 | 显示全部楼层
wu201314 发表于 2012-4-10 09:12
在里面插个表格,水平加垂直居中就行了,不至于这么麻烦的。

这个算了吧!
回复

使用道具 举报

发表于 2012-4-10 09:55:42 | 显示全部楼层
chenzj0818 发表于 2012-4-10 07:43
/* 字体大小约为容器高度的0.9倍 */  这个地方不是很理解.能否解释一下


例子说明一切,请用ie6浏览

 提示:您可以先修改部分代码再运行

回复

使用道具 举报

 楼主| 发表于 2012-4-10 10:00:26 | 显示全部楼层
yangedie 发表于 2012-4-10 09:55
例子说明一切,请用ie6浏览[html]

嗯.谢谢.我也是按照你说的这种方法做的.问题解决了.就是不知道这个0.9倍是怎么回事。
回复

使用道具 举报

发表于 2012-4-10 10:15:17 | 显示全部楼层
0.9倍是针对IE6的。

css:
div.dat_align{ text-align:center;display:table-cell;vertical-align:middle;*line-height:149px;_font-size:130px;}
div .box .dat_align img{*vertical-align:middle;}

html:
<div
<img


我是来拿体力的。呵呵!
回复

使用道具 举报

 楼主| 发表于 2012-4-10 10:51:55 | 显示全部楼层
体力不能给你了.不好意思啊                @ yangedie   得给他  
回复

使用道具 举报

发表于 2012-4-10 10:55:35 | 显示全部楼层

 提示:您可以先修改部分代码再运行


用背景解决
回复

使用道具 举报

发表于 2012-4-10 11:04:29 | 显示全部楼层
wu201314 发表于 2012-4-10 10:55
[html]

好巧妙的方法阿
回复

使用道具 举报

发表于 2012-4-10 11:10:14 | 显示全部楼层
chenzj0818 发表于 2012-4-10 10:51
体力不能给你了.不好意思啊                @ yangedie   得给他

体力给我吧
回复

使用道具 举报

发表于 2012-4-10 11:10:34 | 显示全部楼层
http://www.linxz.de/css_tool/middle_01.html

我是来广告的,送上这个垂直居中的小玩意。
回复

使用道具 举报

 楼主| 发表于 2012-4-10 11:15:22 | 显示全部楼层
wu201314 发表于 2012-4-10 11:10
体力给我吧

哥们             别闹.
回复

使用道具 举报

发表于 2012-4-10 12:56:09 | 显示全部楼层
phantom 发表于 2012-4-10 11:10
http://www.linxz.de/css_tool/middle_01.html

我是来广告的,送上这个垂直居中的小玩意。

这个方法最实用
回复

使用道具 举报

发表于 2012-4-10 13:09:15 | 显示全部楼层
帮顶,我也不会。
回复

使用道具 举报

 楼主| 发表于 2012-4-10 14:09:41 | 显示全部楼层
mhsh 发表于 2012-4-10 13:09
帮顶,我也不会。

现在还不会吗?按照上面这几个方案都能完美解决
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则

QQ|小黑屋|Archiver|手机版|blueidea.com ( 湘ICP备12001430号 )  

GMT+8, 2020-9-20 10:26 , Processed in 0.188976 second(s), 10 queries , Gzip On, Memcache On.

Powered by Discuz! X3.2 Licensed

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表