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

经典论坛

 找回密码
 注册

QQ登录

只需一步,快速开始

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

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

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

搜索
查看: 1631|回复: 4

[求助] 产品图上下左右居中

[复制链接]
发表于 2014-6-2 11:12:37 | 显示全部楼层 |阅读模式
在一个固定大小的DIV的,如何让产品图上下左右居中?

只用CSS能达到这样的效果吗?
发表于 2014-6-2 22:56:35 | 显示全部楼层
需要兼容所有浏览器吗?
回复 支持 反对

使用道具 举报

发表于 2014-6-4 12:07:20 | 显示全部楼层
本帖最后由 jianwang19 于 2014-6-4 12:11 编辑

那个,请问你的产品图是大小固定的吧?按理说都是尺寸一样的产品图,所以直接用margin就可以上下左右居中了,如果不是大小一样的,那么有两个方法,一个是js计算每一个图片的宽度和高度,还是用margin,只不过是js计算的而已;另外的方法是用display:table和dispaly:table-cell,如下:

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

回复 支持 反对

使用道具 举报

发表于 2014-6-4 12:19:59 | 显示全部楼层
本帖最后由 jianwang19 于 2014-6-4 12:23 编辑

原文链接:http://www.cnblogs.com/xueming/a ... /VerticalAlign.html

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

回复 支持 反对

使用道具 举报

发表于 2014-6-4 12:27:01 | 显示全部楼层
本帖最后由 jianwang19 于 2014-6-4 12:31 编辑

然后,上面这种使用span居中的方法还可以换个写法:

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

ps:使用display:table这个写法不兼容IE8-
回复 支持 反对

使用道具 举报

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

本版积分规则

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

GMT+8, 2020-8-12 12:29 , Processed in 0.109098 second(s), 8 queries , Gzip On, Memcache On.

Powered by Discuz! X3.2 Licensed

© 2001-2013 Comsenz Inc.

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