打印

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

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

 提示:您可以先修改部分代码再运行
标准浏览器下另类方法:

 提示:您可以先修改部分代码再运行
标准浏览器严格型申明下:

 提示:您可以先修改部分代码再运行
利用字体大小的方法:

 提示:您可以先修改部分代码再运行
display:inline-block 方法

 提示:您可以先修改部分代码再运行
最简单当然是背景图片的方法拉。

 提示:您可以先修改部分代码再运行
[ 本帖最后由 snwebsite 于 2007-8-21 08:58 编辑 ]
本帖最近评分记录
  • greengnn 威望 +3 我很赞同 2007-8-20 23:10
LOST - FRINGE
一直想说一句:
DIV+CSS布局真的很jian!!

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

被这个问题烦了太多次了,今天发泄哈~
每次自以为进步了,看看别人,发现我他妈竟然是在退步!
思索·····

TOP

认证您的手机,获得手机认证图标, 更多手机认证的好处


 提示:您可以先修改部分代码再运行
这个是我要但效果,可惜一直没有实现,现在是把图片当作背景来处理的
用background的center center使其居中
然后在上层放一个透明但space.gif图片
博客:IM502
有时候想起来有太多问题了,对浏览器也好,对布局也好,个人觉得DIV真的不实用

TOP

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

TOP

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

TOP

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

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

TOP

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

TOP

爱死你了~!

TOP

不错,收了
再问一次楼主:发帖子时标题能不能要加那么多叹号???还是全角的
Simple,Natural,Actual
HotHear's BLOG

TOP

—_—!  郁闷`````````
LOST - FRINGE

TOP

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

做为一个网页布局方式,竟然连如此常用的“垂直布局”一直没有一个很方便快捷的解决方法!
是不是可以这样怀疑,作为一种布局方式,从布局的实用方便上来说:DIV+ ...
个人觉得DIV平台还不成熟
不易推广
就好比楼上说的

TOP

不可以偏盖全
LOST - FRINGE

TOP

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

TOP



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

TOP

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


请文明用语!谢谢

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

TOP

楼上的请注意你的素质。  

本来就是未知大小,已知固定大小还需如此吗?莫名其妙
LOST - FRINGE

TOP

汗,,,有时候不要太死板啊
随野山庄

TOP

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

做为一个网页布局方式,竟然连如此常用的“垂直布局”一直没有一个很方便快捷的解决方法!
是不是可以这样怀疑,作为一种布局方式,从布局的实用方便上来说:DI ...
我希望css的背景属性可以定义多个背景图片,并可以自己定义任意位置浮动。
噢噢~~~~

TOP

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

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

做为一个网页布局方式,竟然连如此常用的“垂直布局”一直没有一个很方便快捷的解决方法!
是不是可以这样怀疑,作为一种布局方式,从布局的实用方便上来说:DI ...
就是啊,这么个小问题,搞这么长的代码,真是垃圾

TOP

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

TOP

谢谢楼主,学习下

TOP

居个中都要这么多问题要讨论。。。诶,不知道说什么好
厨房网  http://www.chufang.cn

TOP

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

TOP

引用:
原帖由 wgh001 于 2006-8-15 13:27 发表
有时候想起来有太多问题了,对浏览器也好,对布局也好,个人觉得DIV真的不实用
为什么人吃肉的时候不直接吃,还要煮熟,煮熟还要加盐,加盐还要放酱油...是吧?

TOP

我也发泄一下!

用div布局 就是一句老话:“没有困难,创造困难也要上!”
博客:http://blog.sina.com.cn/xpoqx

TOP

路,都没有那么简单的。
在走向成熟之前,势必有些弯路。
别的不说,就我前阵重构那个页打开速度的提升,我就喜欢div。
Thr's an I in happiness, thr's no Y in happiness

TOP

萝卜白菜各有所爱!!!

TOP