[問題] display:table-cell的問題(置中相關)

看板Web_Design作者 (人類造不出天堂)時間13年前 (2012/10/29 15:49), 編輯推噓2(205)
留言7則, 3人參與, 最新討論串1/1
大家午安啊 請教前輩們一個問題 我在div裡又包了兩個div 兩個小div中的內容,都必須上下置中 但 display:table-cell; vertical-align:middle; 這個能上下置中的code,同時放在兩個小div會有問題 本來可以用別的置中方法 但都已上線,客戶才突然要改,只能從這個方法去修正了.... 檔案在此,只有一個小小的html檔 https://secure.soscollaborate.com/shared/=EUBFy5aNrgh-Zg== 懶得下載可以看下面: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "" rel="nofollow">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="" rel="nofollow">http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <style type="text/css"> .pdtDiv{ width:218px; height:250px; background-color:#0099FF; } .pdtPic{ width:200px; height:149px; background-color:#00CC00; } .pdtName{ width:200px; height:90px; background-color:#FF6600; } </style> </head> <body> <div class="pdtDiv"> <div class="pdtPic"><a href="#">sdfjljlsaf 500嘻哈嘻哈哈嘻 哈哈嘻哈哈嘻哈哈嘻哈哈嘻哈哈嘻哈哈哈</a></div> <div class="pdtName"><a href="#">sdfjljlsaf 500嘻哈嘻哈哈 嘻哈哈嘻哈哈嘻哈哈嘻哈哈嘻哈哈嘻哈哈哈</a></div> </div> </body> </html> 以上,麻煩高人指點..Orz 謝謝~ -- -- ※ 發信站: 批踢踢實業坊(ptt.cc) ◆ From: 220.136.64.238

10/29 22:20, , 1F
http://jsbin.com/ejizen/3/edit 我不確定這樣做好不好
10/29 22:20, 1F

10/29 22:21, , 2F
不過中間塞個空白元素似乎就沒事了
10/29 22:21, 2F

10/29 23:48, , 3F
在IE似乎是沒效的,不過還是非常感謝~
10/29 23:48, 3F

10/30 21:26, , 4F
table-cell在IE下支援性不好 後來我改用inline-block
10/30 21:26, 4F

10/30 21:29, , 5F
不過你還有垂直置中的需求...這篇文章你看看
10/30 21:29, 5F

10/31 14:10, , 7F
謝謝S兄,我再看看~感恩^^
10/31 14:10, 7F
文章代碼(AID): #1GZZJmb_ (Web_Design)
文章代碼(AID): #1GZZJmb_ (Web_Design)