大家谁那有css图片垂直居中好用的代码

2 views
Skip to first unread message

高莉

unread,
May 13, 2008, 3:28:19 AM5/13/08
to UCDC...@googlegroups.com
 
谢谢大家
我要的显示效果 ：如以下淘宝列表页的效果。
 
 

在网上找了如下代码
但是在FF下测试不行的。
 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
  2. <style type="text/css">  
  3. <!--   
  4. * {margin:0;padding:0}   
  5. div {   
  6.          width:500px;   
  7.          height:500px;   
  8.          line-height:500px;   
  9.          border:1px solid #ccc;   
  10.          overflow:hidden;   
  11.          position:relative;   
  12.          text-align:center;   
  13.          }   
  14. div p {   
  15.          position:static;   
  16.          +position:absolute;   
  17.          top:50%;   
  18.          vertical-align:middle   
  19.          }   
  20. img {   
  21.          position:static;   
  22.          +position:relative;   
  23.          top:-50%;left:-50%;   
  24.          width:276px;   
  25.          height:110px;   
  26.          vertical-align:middle   
  27.          }   
  28. -->  
  29. </style>  
  30. <div><p><img src="http://www.google.com/intl/en/images/logo.gif" /></p></div>  

祝
   工作顺利 开开心心每一天！

搜房家居      高莉 

moneya

unread,
May 13, 2008, 3:43:55 AM5/13/08
to UCDC...@googlegroups.com

公司封了淘宝，截个图看看

 

我想可以考虑，外出div为父级定义position:relative，图片的定位为绝对定位，top：50％； left:50%; margin-top:- ?px (图片一半的高度) ； margin-left:- ?px (图片一半的宽度)

 

 

发件人: UCDC...@googlegroups.com [mailto:UCDC...@googlegroups.com] 代表 高莉
发送时间: 2008年5月13日 15:28
收件人: UCDC...@googlegroups.com
主题: [UCD] 大家谁那有css图片垂直居中好用的代码

Mizi

unread,
May 13, 2008, 4:00:46 AM5/13/08
to UCDC...@googlegroups.com
想垂直居中
有个办法
1. css 中直接使用expression 来控制  耗资源 大量图片不建议使用
2.css 中 使用 display:table-cell; 不过似乎每个版本的IE支持情况都不太一样 hack比较多
3.利用IE layout  技术 简单来说就是 绝对定位居中  不过不适合图片不定长宽情况
4.使用JS  不过需要渲染时间
5. 最简单的办法 图片先使用缩略图缩小在固定大小 然后使用背景居中定位 background:url(imgurl) no-repeat center center;
未标题-1.gif

moneya

unread,
May 13, 2008, 4:17:04 AM5/13/08
to UCDC...@googlegroups.com

对哦。还得问明情况，是什么样的图片，知道尺寸嘛？附件图片的效果是对还是不对。曾经在淘宝的ued论坛上，看到过相关的css解决方法

 

发件人: UCDC...@googlegroups.com [mailto:UCDC...@googlegroups.com] 代表 Mizi
发送时间: 2008年5月13日 16:01
收件人: UCDC...@googlegroups.com
主题: [UCD] Re: 答复: [UCD] 大家谁那有css图片垂直居中好用的代码

roy zhu

unread,
May 13, 2008, 4:20:04 AM5/13/08
to UCDC...@googlegroups.com
麻烦，请不要在UCD群讨论这种技术问题。可以问百度叔叔，谷歌阿姨，或加其他的GROUP。

在08-5-13，moneya <mone...@gmail.com> 写道：

Mogly

unread,
May 13, 2008, 5:29:04 AM5/13/08
to UCDChina
这里有个办法可以借鉴下：
http://hi.baidu.com/mogly/blog/item/8d94b80e4f40fde437d1223f.html


On 5月13日, 下午4时20分, "roy zhu" <royhouse0...@gmail.com> wrote:
> 麻烦，请不要在UCD群讨论这种技术问题。可以问百度叔叔，谷歌阿姨，或加其他的GROUP。
>
> 在08-5-13，moneya <money...@gmail.com> 写道：
>
>
>
> > 对哦。还得问明情况，是什么样的图片，知道尺寸嘛？附件图片的效果是对还是不对。曾经在淘宝的ued论坛上，看到过相关的css解决方法
>
> > *发件人:* UCDC...@googlegroups.com [mailto:UCDC...@googlegroups.com] *代表 *
> > Mizi
> > *发送时间:* 2008年5月13日 16:01
> > *收件人:* UCDC...@googlegroups.com
> > *主题:* [UCD] Re: 答复: [UCD] 大家谁那有css图片垂直居中好用的代码

xukun

unread,
May 13, 2008, 6:59:41 AM5/13/08
to UCDC...@googlegroups.com
请问一下，怎么发新的帖子呢/??

高莉

unread,
May 13, 2008, 7:13:13 AM5/13/08
to UCDC...@googlegroups.com
您好：
谢谢大家了，但暂时还没有找到好的方法。
 
高莉
高莉
祝
   工作顺利 开开心心每一天！

搜房家居      高莉 
tel:     010-59306812
  
2008-05-13
 
发件人： xukun
发送时间： 2008-05-13 19:00:02
抄送：
主题： [UCD] Re: 答复: [UCD] Re: 答复: [UCD] 大家谁那有css图片垂直居中好用的代码

moneya

unread,
May 13, 2008, 8:48:16 PM5/13/08
to UCDC...@googlegroups.com

Ucd不应该被理解的是那么狭义吧，只有想法没有执行的冬冬，叫空想。

技术是实现ucd的重要途径。所以，我觉得在这里探讨点最基础的前端开发的技术问题是再正常不过的。

总比探讨产品经理用那些软件强吧。

用什么软件是看各公司对产品经理的职责定位和该公司的软件提供的战略伙伴而定的（盗版就不提了。呵呵）。这个问题是没有统一正确答案的。

 

 

发件人: UCDC...@googlegroups.com [mailto:UCDC...@googlegroups.com] 代表 roy zhu
发送时间: 2008年5月13日 16:20
收件人: UCDC...@googlegroups.com
主题: [UCD] Re: 答复: [UCD] Re: 答复: [UCD] 大家谁那有css图片垂直居中好用的代码

oooing

unread,
May 13, 2008, 10:15:53 PM5/13/08
to UCDC...@googlegroups.com
刚好昨天用到，写了一个。应该可以解决你的问题了。
此例本在解决位置高度的垂直居中问题，既在一个DIV标签里面解决文本、图片或者混编元素的垂直居中问题。
<!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=utf-8" />
<title></title>
<style type="text/css">
.box{
 background:#000;
 width: 480px;
 height: 480px;
 display:table;
 #position: relative;
}
.innerBox{
 display: table-cell;
 vertical-align:middle;
 #position:absolute;
 #top: 50%; 
}
.pic{
 #position:relative;
 #top: -50%;
 
}
</style>
</head>
 
<body>
<p>此例本在解决位置高度的垂直居中问题，既在一个DIV标签里面解决位置高度文本、图片或者混编元素垂直居中的问题。</p>
<div class="box">
<div class="innerBox">
<div class="pic">
<img src="a.jpg" alt="" />
</div>
</div>
</div>
</body>
</html>
 
oooing
2008-05-14
发件人： Mogly
发送时间： 2008-05-13 17:29:20
收件人： UCDChina
抄送：
主题： [UCD] Re: 答复: [UCD] Re: 答复: [UCD] 大家谁那有css图片垂直居中好用的代码

etycn

unread,
May 13, 2008, 11:51:33 PM5/13/08
to UCDChina
 
哪位朋友的网站是需要走邮箱激活的步骤 ？贴出网站一下，学习一下。谢谢哈
 
 
谢谢！
此致
 
敬礼
2008-05-14
发件人： oooing
发送时间： 2008-05-14 10:18:51

52dan...@163.com

unread,
May 14, 2008, 3:46:47 AM5/14/08
to UCDC...@googlegroups.com
etycn，您好！
 
 
======== 2008-05-14 11:52:05 您在来信中写道： ========

= = = = = = = = = = = = = = = = = = = = = =

　　　　　　　　致
礼！

 
　　　　　　　　　　　　　　52dan...@163.com
　　　　　　　　　　　　　　52dan...@163.com
　　　　　　　　　　　　　　　　　2008-05-14
 
Reply all
Reply to author
Forward
0 new messages