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

经典论坛

 找回密码
 注册

QQ登录

只需一步,快速开始

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

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

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

搜索
查看: 297871|回复: 82

[教程] [推荐] CSS图片垂直居中方法整理集合 !(常见问题解答)

  [复制链接]
发表于 2006-8-14 16:28:57 | 显示全部楼层 |阅读模式
看到问此问题的很多,所以花点时间整理下,欢迎大家提意见,做补充修改,谢谢!
/*lesliezmz整理的方法 2010-01-19*/
当writing-mode为tb-rl 时,文档流是从上到下,从右到左书写。然后设置text-align: center就可以实现垂直方向上的居中。算是一个小技巧吧。
原帖链接:IE6下用writing-mode实现 未知高度替换元素垂直居中。

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


/*lesliezmz 粘贴结束 */

/*yoom 粘贴开始 2010-01-18*/
因为Opera,FF3,IE8均支持display:talbe;这些特性了,因此改进的办法是:

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



如果不喜欢条件注释,可自行将代码以css hack的方式拼凑起来。
原帖链接:未知高宽的图片垂直局中
/*yoom 粘贴结束*/

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




标准浏览器下另类方法:

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



标准浏览器严格型申明下:

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



利用字体大小的方法:

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



display:inline-block 方法

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





最简单当然是背景图片的方法拉。

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


[[i] 本帖最后由 yoom 于 2010-1-19 10:39 编辑 ]

评分

参与人数 1威望 +3 收起 理由
greengnn + 3 我很赞同

查看全部评分

发表于 2006-8-15 14:49:16 | 显示全部楼层
蓝色早解决此问题了
CSS解决未知高度垂直居中

相关的垂直居中问题可看下面一篇
CSS实现完美垂直居中
回复 支持 1 反对 0

使用道具 举报

发表于 2006-8-15 13:42:59 | 显示全部楼层
代码是死的,人是活的
那么多代码,还不如在DIV里面套个表格
回复 支持 1 反对 0

使用道具 举报

发表于 2006-8-15 13:27:16 | 显示全部楼层
有时候想起来有太多问题了,对浏览器也好,对布局也好,个人觉得DIV真的不实用
回复 支持 1 反对 0

使用道具 举报

发表于 2006-8-15 13:14:51 | 显示全部楼层

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



这个是我要但效果,可惜一直没有实现,现在是把图片当作背景来处理的
用background的center center使其居中
然后在上层放一个透明但space.gif图片
回复 支持 0 反对 1

使用道具 举报

发表于 2006-8-14 21:28:51 | 显示全部楼层
一直想说一句:
DIV+CSS布局真的很jian!!

做为一个网页布局方式,竟然连如此常用的“垂直布局”一直没有一个很方便快捷的解决方法!
是不是可以这样怀疑,作为一种布局方式,从布局的实用方便上来说:DIV+CSS很垃圾!

被这个问题烦了太多次了,今天发泄哈~
回复 支持 1 反对 0

使用道具 举报

发表于 2006-8-22 19:22:53 | 显示全部楼层
楼上那个IE7下什么都看不见呢
回复 支持 反对

使用道具 举报

发表于 2006-8-29 17:46:26 | 显示全部楼层
不错,收了
再问一次楼主:发帖子时标题能不能要加那么多叹号???还是全角的
回复 支持 反对

使用道具 举报

 楼主| 发表于 2006-8-29 19:59:08 | 显示全部楼层
—_—!  郁闷`````````
回复 支持 反对

使用道具 举报

发表于 2006-9-12 09:12:52 | 显示全部楼层
原帖由 [i]飞虫 于 2006-8-14 21:28 发表
一直想说一句:
DIV+CSS布局真的很jian!!

做为一个网页布局方式,竟然连如此常用的“垂直布局”一直没有一个很方便快捷的解决方法!
是不是可以这样怀疑,作为一种布局方式,从布局的实用方便上来说:DIV+ ...


个人觉得DIV平台还不成熟
不易推广
就好比楼上说的
回复 支持 反对

使用道具 举报

 楼主| 发表于 2006-9-12 09:23:19 | 显示全部楼层
不可以偏盖全
回复 支持 反对

使用道具 举报

发表于 2006-9-12 14:43:47 | 显示全部楼层
如果让背景图片上下居中,左右局左,该怎么写?
回复 支持 反对

使用道具 举报

 楼主| 发表于 2006-9-12 14:51:51 | 显示全部楼层

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

回复 支持 反对

使用道具 举报

发表于 2006-9-14 13:50:13 | 显示全部楼层
要的是图片未知大小的情况下如何垂直居中!!!!!!!!!!!


请文明用语!谢谢

[[i] 本帖最后由 snwebsite 于 2006-11-7 06:05 编辑 ]
回复 支持 反对

使用道具 举报

 楼主| 发表于 2006-9-14 13:56:13 | 显示全部楼层
楼上的请注意你的素质。  

本来就是未知大小,已知固定大小还需如此吗?莫名其妙
回复 支持 反对

使用道具 举报

发表于 2006-10-19 01:52:28 | 显示全部楼层
原帖由 [i]飞虫 于 2006-8-14 21:28 发表
一直想说一句:
DIV+CSS布局真的很jian!!

做为一个网页布局方式,竟然连如此常用的“垂直布局”一直没有一个很方便快捷的解决方法!
是不是可以这样怀疑,作为一种布局方式,从布局的实用方便上来说:DI ...


我希望css的背景属性可以定义多个背景图片,并可以自己定义任意位置浮动。
回复 支持 反对

使用道具 举报

发表于 2006-11-17 11:54:05 | 显示全部楼层

XHTML 1.0 Transitional在FF中有疑义

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>dd</title>
</head>
<style type="text/css">
* {margin:0;padding:0}
div {
        width:500px;
        height:500px;
        line-height:500px;
        border:1px solid #ccc;
        overflow:hidden;
        position:relative;
        text-align:center;
        }
div p {
        position:static;
        +position:absolute;
        top:50%;
        vertical-align:middle
        }
img {
        position:static;
        +position:relative;
        top:-50%;left:-50%;
        width:276px;
        height:110px;
        vertical-align:middle
        }

</style>

<div><p><img src="http://www.google.com/intl/en/images/logo.gif" /></p></div>
</body>

</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
我在FF中发现不是垂直居中的是怎么回事呢
回复 支持 反对

使用道具 举报

发表于 2006-12-31 19:27:53 | 显示全部楼层
原帖由 [i]飞虫 于 2006-8-14 21:28 发表
一直想说一句:
DIV+CSS布局真的很jian!!

做为一个网页布局方式,竟然连如此常用的“垂直布局”一直没有一个很方便快捷的解决方法!
是不是可以这样怀疑,作为一种布局方式,从布局的实用方便上来说:DI ...

就是啊,这么个小问题,搞这么长的代码,真是垃圾
回复 支持 反对

使用道具 举报

发表于 2007-7-4 18:05:49 | 显示全部楼层
div + css 因为各浏览器的原因弄得我们很受伤
回复 支持 反对

使用道具 举报

发表于 2007-7-5 15:04:34 | 显示全部楼层
居个中都要这么多问题要讨论。。。诶,不知道说什么好
回复 支持 反对

使用道具 举报

发表于 2007-8-1 21:53:07 | 显示全部楼层
楼上的几位真的是有病,垂直居中有必要搞那么复杂吗?计算一下高度直接用margin-top不就OK了,是不是在卖弄技巧,有必要让简单的问题复杂化吗
回复 支持 反对

使用道具 举报

发表于 2007-8-19 13:24:14 | 显示全部楼层
原帖由 [i]wgh001 于 2006-8-15 13:27 发表
有时候想起来有太多问题了,对浏览器也好,对布局也好,个人觉得DIV真的不实用


为什么人吃肉的时候不直接吃,还要煮熟,煮熟还要加盐,加盐还要放酱油...是吧?
回复 支持 反对

使用道具 举报

发表于 2007-8-19 17:14:37 | 显示全部楼层
我也发泄一下!

用div布局 就是一句老话:“没有困难,创造困难也要上!”
回复 支持 反对

使用道具 举报

发表于 2007-8-20 13:40:52 | 显示全部楼层
路,都没有那么简单的。
在走向成熟之前,势必有些弯路。
别的不说,就我前阵重构那个页打开速度的提升,我就喜欢div。
回复 支持 反对

使用道具 举报

发表于 2007-9-20 18:02:50 | 显示全部楼层
对无知的人,不需要太多的解释,

都说了不知道图片的尺寸,如果你只考虑你自己,当然不用看着篇文章,但是要合作,从后台插入图片你就知道了,那些JJWW的人,就是啥也不会,啥也不懂,就知道装
回复 支持 反对

使用道具 举报

发表于 2007-10-23 14:27:35 | 显示全部楼层
其实这只是一个考试题目而已
很多人觉得用块对象布局来处理这种事情非常麻烦,其实还是用了表格布局的思考方式来处理块对象的布局

在用DIV布局的时候一般会根据具体情况用其他方式替代这种表格布局常见方式的。
回复 支持 反对

使用道具 举报

发表于 2007-11-19 15:59:23 | 显示全部楼层
这些东西也就是做做演示的demo
加上完整的首部声明、<html>、<body>、<head>等结构标签,没能兼容的,派不上实际用场
回复 支持 反对

使用道具 举报

发表于 2007-12-12 17:05:51 | 显示全部楼层
用那么多css来实现一个图片垂直居中问题,有点....
还不如div里面插一个表格来的方便,也没那么多多兼容不兼容的问题,代码也很少.
回复 支持 反对

使用道具 举报

发表于 2007-12-12 18:31:31 | 显示全部楼层
同意二楼说法,代码应以易用性为主
回复 支持 反对

使用道具 举报

发表于 2007-12-17 11:38:47 | 显示全部楼层
遇见这种情况我就用表格
回复 支持 反对

使用道具 举报

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

本版积分规则

QQ|小黑屋|Archiver|手机版|blueidea.com ( ICP05002321 )  

GMT+8, 2019-5-21 11:37 , Processed in 0.093750 second(s), 13 queries , Gzip On, Memcache On.

Powered by Discuz! X3.2 Licensed

© 2001-2013 Comsenz Inc.

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