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

经典论坛

 找回密码
 注册

QQ登录

只需一步,快速开始

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

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

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

搜索
查看: 2175|回复: 26

这个破垂直居中,到底该怎么解决好咯?o(︶︿︶)o 唉

  [复制链接]
发表于 2012-5-19 14:21:05 | 显示全部楼层 |阅读模式

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



不用行高,标签不在另外定义了?有什么办法不?我找了一上午,太复杂了。
 楼主| 发表于 2012-5-19 14:30:08 | 显示全部楼层
有人在不
回复 支持 反对

使用道具 举报

发表于 2012-5-19 14:32:31 | 显示全部楼层
都向左浮动了,怎么居
回复 支持 反对

使用道具 举报

 楼主| 发表于 2012-5-19 14:33:08 | 显示全部楼层
daddy 发表于 2012-5-19 14:32
都向左浮动了,怎么居

里面的内容呗,算了我内容在定义下。。
回复 支持 反对

使用道具 举报

发表于 2012-5-19 14:35:21 | 显示全部楼层
这玩意用表格多简单啊。
回复 支持 反对

使用道具 举报

发表于 2012-5-19 19:48:23 | 显示全部楼层
不喜欢表格
回复 支持 反对

使用道具 举报

发表于 2012-5-21 14:56:06 | 显示全部楼层
文字的话最好用line-height,各浏览器都兼容
回复 支持 反对

使用道具 举报

发表于 2012-5-21 15:08:10 | 显示全部楼层
我来学习的  
回复 支持 反对

使用道具 举报

 楼主| 发表于 2012-5-21 15:09:01 | 显示全部楼层
btlitong 发表于 2012-5-21 14:56
文字的话最好用line-height,各浏览器都兼容

假如height:100px;那么行高是不是也要定100px了,我的内容不能隐藏要全部显示,如果宽度定死了,那么是不是就下溢了,两行就高200,你算算吧。。。。我自己用死办法解决了。
回复 支持 反对

使用道具 举报

 楼主| 发表于 2012-5-21 15:09:36 | 显示全部楼层
谢谢各位鼎立观贴与帮助,感谢
回复 支持 反对

使用道具 举报

发表于 2012-5-21 15:26:31 | 显示全部楼层
一般用line-height 其次写死padding margin 或者position 定位
回复 支持 反对

使用道具 举报

发表于 2012-5-21 15:27:50 | 显示全部楼层
表格也好用 不过我只用在特殊情况下! lz权衡一下吧 那个方式代价小选用哪种吧!
回复 支持 反对

使用道具 举报

发表于 2012-5-21 17:55:05 | 显示全部楼层
如果文字不换行的话可以设置行高,line-height:60px;
回复 支持 反对

使用道具 举报

 楼主| 发表于 2012-5-21 21:41:54 | 显示全部楼层
879db4b190e760ad36518898d917fb6d9a9d2367ce36-lChOkI.png

傻瓜办法解决了,不用表格,太庞大了。
回复 支持 反对

使用道具 举报

发表于 2012-5-22 09:35:43 | 显示全部楼层
那个方式代价小选用哪种吧
回复 支持 反对

使用道具 举报

发表于 2012-5-22 10:51:22 | 显示全部楼层
这根本就是一个表格吗!用div做表格? 
回复 支持 反对

使用道具 举报

发表于 2012-5-22 11:19:24 | 显示全部楼层
并不是说DIV就是完美的。对于不同的页面。哪个简单就用哪了啦。呵
回复 支持 反对

使用道具 举报

 楼主| 发表于 2012-5-28 16:38:27 | 显示全部楼层
table东西太多了,我一直用div做表格。。
回复 支持 反对

使用道具 举报

发表于 2012-5-28 16:55:29 | 显示全部楼层
该用表格的时候就用表格,你自己对比一下两者的代码量、书写和维护的难度,就知道了。HTML代码里不是只有div ul li   这几个标签的。
回复 支持 反对

使用道具 举报

 楼主| 发表于 2012-5-28 17:04:10 | 显示全部楼层
该用表格就用表格咯。
回复 支持 反对

使用道具 举报

发表于 2012-5-28 17:12:26 | 显示全部楼层
本帖最后由 ssay 于 2012-5-28 17:15 编辑
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta charset="utf-8">
  5. <title>无标题文档</title>
  6. <style type="text/css">
  7. * html,* html body{background:url(about:blank) fixed}
  8. html {overflow-y:scroll;}
  9. body {margin:0; padding:0; font:12px "\5B8B\4F53",sans-serif;background:#ffffff;}
  10. div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,blockquote,p{padding:0; margin:0;}
  11. table,td,tr,th{font-size:12px;}
  12. li{list-style-type:none;}
  13. img{vertical-align:top;border:0;}
  14. ol,ul {list-style:none;}
  15. h1,h2,h3,h4,h5,h6 {font-size:12px; font-weight:normal;}
  16. .part-view{width:1200px; height:36px;position:relative;}
  17. .part-item{background-position: 0 -96px;background-repeat: repeat-x;width:1200px;height:36px;position:absolute;top:0}
  18. .part-item li{font-size:14px;line-height:36px;font-weight:800;text-align:center;float:left;}
  19. .part-item li.pt{background-position: -146px -60px;width:160px;} /*Product thumbnail 产品缩略图*/
  20. .part-item li.pn{width:300px;}/*Product Name 产品名称*/
  21. .part-item li.ps{width:150px;}/*Product Specifications 产品规格*/
  22. .part-item li.pc{width:150px;}/*Product Content 产品含量*/
  23. .part-item li.pctn{width:150px;}/*Product CTN 产品箱规*/
  24. .part-item li.pw{width:130px;}/*Product weight 产品毛重*/
  25. .part-item li.rp{background-position: 156px -132px;width:160px;} /*Reference price 参考价格*/
  26.   
  27. .list-view{width:1200px;}
  28. .list-item ul{width:1200px;height:80px; border:1px #CCCCCC solid}
  29. .list-item li{ line-height:80px;text-align:center;float:left; height:80px;}
  30. .list-item li.pt{width:160px;}
  31. .list-item li.pt img{width:80px; height:60px; margin:10px 0; line-height:80px;}
  32. .list-item li.pn{width:300px;}
  33. .list-item li.ps{width:150px;}
  34. .list-item li.pc{width:150px;}
  35. .list-item li.pctn{width:150px;}
  36. .list-item li.pw{width:130px;}
  37. .list-item li.rp{width:160px;}
  38. .list-item .change{background-color:#fef;}
  39. .list-item .current{background-color:#f3f8fc;}
  40. </style>
  41. </head>
  42. <body>
  43.     <div class="list-item" id="table">
  44.       <ul>
  45.         <li class="pt"><img src="http://m.51huapao.com/uploadfiles/stock/2011/9/29/2011092914432330799.jpg"></li> <li class="pn">1寸16发地礼</li> <li class="ps">φ25*30*175mm</li>  <li class="pc">12/1</li> <li class="pctn">51*39*17CM</li> <li class="pw">17KG</li> <li class="rp">105.6元/箱</li>
  46.       </ul>
  47.       <ul>
  48.         <li class="pt"><img src="http://m.51huapao.com/uploadfiles/stock/2011/9/29/2011092914432330799.jpg"></li> <li class="pn">1寸16发地礼</li> <li class="ps">φ25*30*175mm</li>  <li class="pc">12/1</li> <li class="pctn">51*39*17CM</li> <li class="pw">17KG</li> <li class="rp">105.6元/箱</li>
  49.       </ul>
  50.     </div>
  51. </body>
  52. </html>
复制代码
不说什么了 by www.sj5d.com,自己看代码吧!
回复 支持 反对

使用道具 举报

 楼主| 发表于 2012-5-28 17:14:14 | 显示全部楼层
ssay 发表于 2012-5-28 17:12
[html]

已经解决了,你加行高,不符合要求饿。
回复 支持 反对

使用道具 举报

 楼主| 发表于 2012-5-28 17:14:33 | 显示全部楼层
ssay 发表于 2012-5-28 17:12
[html]

假如height:100px;那么行高是不是也要定100px了,我的内容不能隐藏要全部显示,如果宽度定死了,那么是不是就下溢了,两行就高200,你算算吧。。。。我自己用死办法解决了。
回复 支持 反对

使用道具 举报

发表于 2012-5-28 17:16:38 | 显示全部楼层
huangchanggen 发表于 2012-5-28 17:14
已经解决了,你加行高,不符合要求饿。

加行高不符合要求????为什么????????
回复 支持 反对

使用道具 举报

发表于 2012-5-28 17:25:13 | 显示全部楼层
huangchanggen 发表于 2012-5-28 17:14
假如height:100px;那么行高是不是也要定100px了,我的内容不能隐藏要全部显示,如果宽度定死了,那么是不 ...

哦,明白了,原来要自由高度的,像现在的瀑布效果!
回复 支持 反对

使用道具 举报

 楼主| 发表于 2012-5-28 17:26:35 | 显示全部楼层
ssay 发表于 2012-5-28 17:16
加行高不符合要求????为什么????????

1.标题内容在不能隐藏 。加行高,80,如果有两行内容,那么行高加起来160吧,东西不撑开啦。
回复 支持 反对

使用道具 举报

 楼主| 发表于 2012-5-28 17:27:08 | 显示全部楼层
回复 支持 反对

使用道具 举报

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

本版积分规则

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

GMT+8, 2019-12-9 04:54 , Processed in 0.109100 second(s), 10 queries , Gzip On, Memcache On.

Powered by Discuz! X3.2 Licensed

© 2001-2013 Comsenz Inc.

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