打印

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

snwebsite [楼主]

蓝色怪兽
版主

帖子: 4327
体力: 7370
威望: 68

1^# 大中小发表于 2006-8-14 16:28

看到问此问题的很多，所以花点时间整理下，欢迎大家提意见，做补充修改，谢谢！

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

标准浏览器下另类方法:

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

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

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

利用字体大小的方法：

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

display:inline-block 方法

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

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

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

[ 本帖最后由 snwebsite 于 2007-8-21 08:58 编辑 ]

本帖最近评分记录

greengnn 威望 +3 我很赞同 2007-8-20 23:10

LOST

TOP

飞虫

高级会员

帖子: 334
体力: 649
威望: 0
当前: 广东深圳
离线: 3 天

发短消息

2^# 大中小发表于 2006-8-14 21:28

一直想说一句：
DIV+CSS布局真的很jian！！

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

被这个问题烦了太多次了，今天发泄哈～

每次自以为进步了，看看别人，发现我他妈竟然是在退步！

TOP

gartional

高级会员

帖子: 525
体力: 871
威望: 0
离线: 35 天

发短消息

3^# 大中小发表于 2006-8-15 09:11

思索·····

我的

TOP

老二

im502
银牌会员

帖子: 465
体力: 1436
威望: 2
当前: 北京朝阳区
离线: 3 天

专长 网页设计,PHP,MySQL

4^# 大中小发表于 2006-8-15 13:14

<html>
<head>
<style type="text/css">

</style>
</head>
<body>
 <div id="rightcol">
      <ul id="picturelist">
        <li><a href="#"><img style="background:url(http://www.blueidea.com/img/common/logo.gif)  no-repeat center center;" src="http://www.797audio.com.cn/space.gif" />blueidea</a></li>
        <li><a href="#"><img style="background:url(http://www.blueidea.com/img/common/logo.gif)  no-repeat center center;" src="http://www.797audio.com.cn/space.gif" />blueidea</a></li>
		<li><a href="#"><img style="background:url(http://www.blueidea.com/img/common/logo.gif)  no-repeat center center;" src="http://www.797audio.com.cn/space.gif" />blueidea</a></li>
		<li><a href="#"><img style="background:url(http://www.blueidea.com/img/common/logo.gif)  no-repeat center center;" src="http://www.797audio.com.cn/space.gif" />blueidea</a></li>
		<li><a href="#"><img style="background:url(http://bbs.blueidea.com/images/blue/newtopic.gif)  no-repeat center center;" src="http://www.797audio.com.cn/space.gif" />blueidea</a></li>
	 </ul>
  </div>
</body>
</html>

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

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

im502

TOP

wgh001

高级会员

帖子: 365
体力: 726
威望: 1
离线: 59 天

5^# 大中小发表于 2006-8-15 13:27

有时候想起来有太多问题了，对浏览器也好，对布局也好，个人觉得DIV真的不实用

网站设计

TOP

zern

久舞而凄
中级会员

帖子: 185
体力: 299
威望: 0
离线: 5 天

6^# 大中小发表于 2006-8-15 13:42

代码是死的,人是活的
那么多代码,还不如在DIV里面套个表格

视为

TOP

foruf

新手上路

帖子: 54
体力: 40
威望: 0
离线: 73 天

发短消息

7^# 大中小发表于 2006-8-15 14:26

引用:

原帖由 zern 于 2006-8-15 13:42 发表
代码是死的,人是活的
那么多代码,还不如在DIV里面套个表格

有道理

最爱关之琳
www.goddessrosamund.com
我的blog：Jhm's space

TOP

reda

初级会员

帖子: 60
体力: 121
威望: 0
离线: 62 天

发短消息

8^# 大中小发表于 2006-8-15 14:49

蓝色早解决此问题了
CSS解决未知高度垂直居中

相关的垂直居中问题可看下面一篇
CSS实现完美垂直居中

TOP

zern

久舞而凄
中级会员

帖子: 185
体力: 299
威望: 0
离线: 5 天

9^# 大中小发表于 2006-8-22 19:22

楼上那个IE7下什么都看不见呢

视为

TOP

mgtw

一猪还有一猪兜
中级会员

帖子: 789
体力: 456
威望: 0
当前: 广东广州
离线: 1 天

发短消息

专长 网页设计,Flash,PHP

10^# 大中小发表于 2006-8-29 16:24

爱死你了~！

TOP

HotHeart

徐徐
银牌会员

帖子: 1231
体力: 2532
威望: 24
离线: 17 天

专长 JS,ASP,.NET

11^# 大中小发表于 2006-8-29 17:46

不错，收了
再问一次楼主：发帖子时标题能不能要加那么多叹号？？？还是全角的

Simple,Natural,Actual
HotHear's BLOG

TOP

snwebsite [楼主]

蓝色怪兽
版主

帖子: 4327
体力: 7370
威望: 68

12^# 大中小发表于 2006-8-29 19:59

—_—！郁闷`````````

LOST

TOP

wgh001

高级会员

帖子: 365
体力: 726
威望: 1
离线: 59 天

13^# 大中小发表于 2006-9-12 09:12

引用:

原帖由飞虫于 2006-8-14 21:28 发表
一直想说一句：
DIV+CSS布局真的很jian！！

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

个人觉得DIV平台还不成熟
不易推广
就好比楼上说的

网站设计

TOP

snwebsite [楼主]

蓝色怪兽
版主

帖子: 4327
体力: 7370
威望: 68

14^# 大中小发表于 2006-9-12 09:23

不可以偏盖全

LOST

TOP

soncy

木鱼阿呆
高级会员

帖子: 361
体力: 566
威望: 0
当前: 北京海淀区
离线: 3 天

15^# 大中小发表于 2006-9-12 14:43

如果让背景图片上下居中，左右局左，该怎么写？

my blog

TOP

snwebsite [楼主]

蓝色怪兽
版主

帖子: 4327
体力: 7370
威望: 68

16^# 大中小发表于 2006-9-12 14:51

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

LOST

TOP

qsylbt

银牌会员

帖子: 317
体力: 1073
威望: 0
离线: 62 天

17^# 大中小发表于 2006-9-14 13:50

要的是图片未知大小的情况下如何垂直居中！！！！！！！！！！！

请文明用语!谢谢

[ 本帖最后由 snwebsite 于 2006-11-7 06:05 编辑 ]

TOP

snwebsite [楼主]

蓝色怪兽
版主

帖子: 4327
体力: 7370
威望: 68

18^# 大中小发表于 2006-9-14 13:56

楼上的请注意你的素质。

本来就是未知大小，已知固定大小还需如此吗？莫名其妙

LOST

TOP

pastako

新手上路

帖子: 91
体力: 25
威望: 0
离线: 12 天

19^# 大中小发表于 2006-10-17 15:55

汗,,,有时候不要太死板啊

随野山庄

TOP

hauy

初级会员

帖子: 115
体力: 161
威望: 0
当前: 上海浦东

专长 网页设计,UI,前端制作

20^# 大中小发表于 2006-10-19 01:52

引用:

原帖由飞虫于 2006-8-14 21:28 发表
一直想说一句：
DIV+CSS布局真的很jian！！

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

我希望css的背景属性可以定义多个背景图片，并可以自己定义任意位置浮动。

噢噢~~~~

TOP

dongna

初级会员

帖子: 30
体力: 69
威望: 0
离线: 25 天

发短消息

21^# 大中小发表于 2006-11-17 11:54

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中发现不是垂直居中的是怎么回事呢

TOP

zhaoliancheng

我爱红茶
高级会员

帖子: 456
体力: 938
威望: 0
当前: 重庆永川
离线: 1 天

22^# 大中小发表于 2006-12-31 19:27

引用:

原帖由飞虫于 2006-8-14 21:28 发表
一直想说一句：
DIV+CSS布局真的很jian！！

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

就是啊，这么个小问题，搞这么长的代码，真是垃圾

TOP

pensz

初级会员

帖子: 63
体力: 123
威望: 0
离线: 136 天

发短消息

23^# 大中小发表于 2007-7-4 18:05

div + css 因为各浏览器的原因弄得我们很受伤

TOP

zwbfw

高级会员

帖子: 200
体力: 538
威望: 0
离线: 216 天

发短消息

24^# 大中小发表于 2007-7-4 20:48

谢谢楼主，学习下

TOP

alexnyy717

高级会员

帖子: 351
体力: 607
威望: 0
当前: 北京朝阳区
离线: 2 天

发短消息

25^# 大中小发表于 2007-7-5 15:04

居个中都要这么多问题要讨论。。。诶，不知道说什么好

厨房网 http://www.chufang.cn

TOP

dxformat

初级会员

帖子: 63
体力: 134
威望: 0

发短消息

26^# 大中小发表于 2007-8-1 21:53

楼上的几位真的是有病,垂直居中有必要搞那么复杂吗?计算一下高度直接用margin-top不就OK了,是不是在卖弄技巧,有必要让简单的问题复杂化吗

TOP

yinghailai

初级会员

帖子: 29
体力: 57
威望: 0
当前: 浙江杭州
离线: 21 天

发短消息

27^# 大中小发表于 2007-8-19 13:24

引用:

原帖由 wgh001 于 2006-8-15 13:27 发表
有时候想起来有太多问题了，对浏览器也好，对布局也好，个人觉得DIV真的不实用

为什么人吃肉的时候不直接吃，还要煮熟，煮熟还要加盐，加盐还要放酱油...是吧？

TOP

xpoqx

银牌会员

帖子: 712
体力: 1117
威望: 0
当前: 辽宁沈阳
离线: 1 天

28^# 大中小发表于 2007-8-19 17:14

我也发泄一下！

用div布局就是一句老话：“没有困难，创造困难也要上！”

博客:http://blog.sina.com.cn/xpoqx

TOP

dsqwei1

Andy88
高级会员

帖子: 1281
体力: 848
威望: 0
当前: 北京朝阳区

发短消息

专长 前端制作,JS,JAVA

29^# 大中小发表于 2007-8-20 13:40

路，都没有那么简单的。
在走向成熟之前，势必有些弯路。
别的不说，就我前阵重构那个页打开速度的提升，我就喜欢div。

"权，然后知轻重；度，然后知长短."

TOP

gaga2587

初级会员

帖子: 28
体力: 61
威望: 0
离线: 300 天

发短消息

30^# 大中小发表于 2007-8-22 16:14

萝卜白菜各有所爱！！！

TOP

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

引用:

引用:

引用:

XHTML 1.0 Transitional在FF中有疑义

引用:

引用:

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