Google Groups Home
Help | Sign in
UCDChina
Home
+ new post
Files
About this group
Join this group
大家谁那有css图片垂直居中好用的代码
Options
There are currently too many topics in this group that display first. To make this topic appear first, remove this option from another topic.
There was an error processing your request. Please try again.
flag
   12 messages - Collapse all
The group you are posting to is a Usenet group. Messages posted to this group will make your email address visible to anyone on the Internet.
Your reply message has not been sent.
Your post was successful
高莉  
View profile
  More options May 13, 3:28 am
From: "高莉" <ga...@soufun.com>
Date: Tue, 13 May 2008 15:28:19 +0800
Local: Tues, May 13 2008 3:28 am
Subject: 大家谁那有css图片垂直居中好用的代码
Reply | Reply to author | Forward | Print | Individual message | Show original | Report this message | Find messages by this author

您好：UCDChina@googlegroups.com

谢谢大家
我要的显示效果 ：如以下淘宝列表页的效果。
http://list.taobao.com/browse/50008165-50010541/t-0------------------...

在网上找了如下代码
但是在FF下测试不行的。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
<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>  

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

搜房家居      高莉


    Reply    Reply to author    Forward  
You must Sign in before you can post messages.
To post a message you must first join this group.
Please update your nickname on the subscription settings page before posting.
You do not have the permission required to post.
Discussion subject changed to "答复: [UCD] 大家谁那有css图片垂直居中好用的代码" by moneya
moneya  
View profile
  More options May 13, 3:43 am
From: "moneya" <money...@gmail.com>
Date: Tue, 13 May 2008 15:43:55 +0800
Local: Tues, May 13 2008 3:43 am
Subject: 答复: [UCD] 大家谁那有css图片垂直居中好用的代码
Reply | Reply to author | Forward | Print | Individual message | Show original | Report this message | Find messages by this author

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

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

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

您好：UCDChina@googlegroups.com

谢谢大家

我要的显示效果 ：如以下淘宝列表页的效果。

http://list.taobao.com/browse/50008165-50010541/t-0------------------...
--------------20-grid-commend-0-all-50010541.htm#ListSellerRecommended

在网上找了如下代码

但是在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>  

  _____  

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

搜房家居      高莉

  _____  


    Reply    Reply to author    Forward  
You must Sign in before you can post messages.
To post a message you must first join this group.
Please update your nickname on the subscription settings page before posting.
You do not have the permission required to post.
Mizi  
View profile
  More options May 13, 4:00 am
From: Mizi <amily4...@gmail.com>
Date: Tue, 13 May 2008 16:00:46 +0800
Local: Tues, May 13 2008 4:00 am
Subject: Re: [UCD] 答复: [UCD] 大家谁那有css图片垂直居中好用的代码
Reply | Reply to author | Forward | Print | Individual message | Show original | Report this message | Find messages by this author

想垂直居中
有个办法
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
124K Download

    Reply    Reply to author    Forward  
You must Sign in before you can post messages.
To post a message you must first join this group.
Please update your nickname on the subscription settings page before posting.
You do not have the permission required to post.
Discussion subject changed to "答复: [UCD] Re: 答复: [UCD] 大家谁那有css图片垂直居中好用的代码" by moneya
moneya  
View profile
  More options May 13, 4:17 am
From: "moneya" <money...@gmail.com>
Date: Tue, 13 May 2008 16:17:04 +0800
Local: Tues, May 13 2008 4:17 am
Subject: 答复: [UCD] Re: 答复: [UCD] 大家谁那有css图片垂直居中好用的代码
Reply | Reply to author | Forward | Print | Individual message | Show original | Report this message | Find messages by this author

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

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

想垂直居中

有个办法

1. css 中直接使用expression 来控制  耗资源 大量图片不建议使用

2.css 中 使用 display:table-cell; 不过似乎每个版本的IE支持情况都不太一样
hack比较多

3.利用IE layout  技术 简单来说就是 绝对定位居中  不过不适合图片不定长宽情况

4.使用JS  不过需要渲染时间

5. 最简单的办法 图片先使用缩略图缩小在固定大小 然后使用背景居中定位
background:url(imgurl) no-repeat center center;


    Reply    Reply to author    Forward  
You must Sign in before you can post messages.
To post a message you must first join this group.
Please update your nickname on the subscription settings page before posting.
You do not have the permission required to post.
roy zhu  
View profile
  More options May 13, 4:20 am
From: "roy zhu" <royhouse0...@gmail.com>
Date: Tue, 13 May 2008 16:20:04 +0800
Local: Tues, May 13 2008 4:20 am
Subject: Re: [UCD] 答复: [UCD] Re: 答复: [UCD] 大家谁那有css图片垂直居中好用的代码
Reply | Reply to author | Forward | Print | Individual message | Show original | Report this message | Find messages by this author

麻烦，请不要在UCD群讨论这种技术问题。可以问百度叔叔，谷歌阿姨，或加其他的GROUP。

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


    Reply    Reply to author    Forward  
You must Sign in before you can post messages.
To post a message you must first join this group.
Please update your nickname on the subscription settings page before posting.
You do not have the permission required to post.
Mogly  
View profile
  More options May 13, 5:29 am
From: Mogly <mogly...@gmail.com>
Date: Tue, 13 May 2008 02:29:04 -0700 (PDT)
Local: Tues, May 13 2008 5:29 am
Subject: Re: 答复: [UCD] Re: 答复: [UCD] 大家谁那有css图片垂直居中好用的代码
Reply | Reply to author | Forward | Print | Individual message | Show original | Report this message | Find messages by this author
这里有个办法可以借鉴下：
http://hi.baidu.com/mogly/blog/item/8d94b80e4f40fde437d1223f.html

On 5月13日, 下午4时20分, "roy zhu" <royhouse0...@gmail.com> wrote:


    Reply    Reply to author    Forward  
You must Sign in before you can post messages.
To post a message you must first join this group.
Please update your nickname on the subscription settings page before posting.
You do not have the permission required to post.
xukun  
View profile
  More options May 13, 6:59 am
From: "xukun" <xu...@coship.com>
Date: Tue, 13 May 2008 18:59:41 +0800
Local: Tues, May 13 2008 6:59 am
Subject: Re: [UCD] Re: 答复: [UCD] Re: 答复: [UCD] 大家谁那有css图片垂直居中好用的代码
Reply | Reply to author | Forward | Print | Individual message | Show original | Report this message | Find messages by this author
请问一下，怎么发新的帖子呢/??


    Reply    Reply to author    Forward  
You must Sign in before you can post messages.
To post a message you must first join this group.
Please update your nickname on the subscription settings page before posting.
You do not have the permission required to post.
高莉  
View profile
  More options May 13, 7:13 am
From: "高莉" <ga...@soufun.com>
Date: Tue, 13 May 2008 19:13:13 +0800
Local: Tues, May 13 2008 7:13 am
Subject: Re: [UCD] Re: 答复: [UCD] Re: 答复: [UCD] 大家谁那有css图片垂直居中好用的代码
Reply | Reply to author | Forward | Print | Individual message | Show original | Report this message | Find messages by this author

您好：

谢谢大家了，但暂时还没有找到好的方法。

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

搜房家居      高莉

tel:     010-59306812
web:   http://home.soufun.com   http://sogo.soufun.com    
E-mail:ga...@soufun.com

2008-05-13

发件人： xukun
发送时间： 2008-05-13 19:00:02
收件人： UCDChina@googlegroups.com
抄送：
主题： [UCD] Re: 答复: [UCD] Re: 答复: [UCD] 大家谁那有css图片垂直居中好用的代码

请问一下，怎么发新的帖子呢/??


    Reply    Reply to author    Forward  
You must Sign in before you can post messages.
To post a message you must first join this group.
Please update your nickname on the subscription settings page before posting.
You do not have the permission required to post.
Discussion subject changed to "答复: [UCD] Re: 答复: [UCD] Re: 答复: [UCD] 大家谁那有css图片垂直居中好用的代码" by moneya
moneya  
View profile
  More options May 13, 8:48 pm
From: "moneya" <money...@gmail.com>
Date: Wed, 14 May 2008 08:48:16 +0800
Local: Tues, May 13 2008 8:48 pm
Subject: 答复: [UCD] Re: 答复: [UCD] Re: 答复: [UCD] 大家谁那有css图片垂直居中好用的代码
Reply | Reply to author | Forward | Print | Individual message | Show original | Report this message | Find messages by this author

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

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

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

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

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

麻烦，请不要在UCD群讨论这种技术问题。可以问百度叔叔，谷歌阿姨，或加其他的
GROUP。

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

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

发件人: UCDChina@googlegroups.com [mailto:UCDChina@googlegroups.com] 代表
Mizi
发送时间: 2008年5月13日 16:01
收件人: UCDChina@googlegroups.com
主题: [UC