作者eliang ()
看板Web_Design
標題[問題] 包含 float block 的 block 要如何置中?
時間Fri Jun 22 21:22:52 2007
Hi,
抱歉, 這篇文章的標題可能很難懂,
不過沒辦法, 我實在不知道要怎麼用一句簡短的句子來描述這個問題,
看不懂標題沒關係, 請看以下問題的詳細描述:
假設有一個 block 包含數個 float: left 的 block, 如圖:
┌─────────────────────────────────────┐
│
┌──┐┌──┐┌──┐ │
│
└──┘└──┘└──┘ │
└─────────────────────────────────────┘
其中裡面的三個黃色框框表示 float: left 的 block,
外面的灰色框框則包含這些黃色框框,
一個普通的 block, 若沒有在 CSS 裡特別指定, 那個 block 的寬度是 100%,
會佔滿整個畫面, 正如上圖灰色框框所示,
而黃色框框因為是 float: left, 所以它們的寬度會縮到最小, 並且靠左邊並排,
重點來了, 我要問的問題就是,
我希望灰色框框的寬度能隨著內含物
自動縮小, 並且在畫面上
水平置中, 如圖:
┌────────────┐
│
┌──┐┌──┐┌──┐│
│
└──┘└──┘└──┘│
└────────────┘
不知道有沒有人知道怎麼做? 謝謝!
--
※ 發信站: 批踢踢實業坊(ptt.cc)
◆ From: 220.132.133.199
1F：推 TonyQ:水平置中的話 對內容物設margin? 06/22 21:33
2F：→ eliang:內容物已經是 float:left了,所以應該沒辦法置中吧? 06/22 21:36
3F：推 hermitwhite:設定明顯小於需求的寬度加上nowrap行不行？ 06/23 08:35
4F：→ hermitwhite:水平置中標準方法是定寬度的，這裡說不定要用到table 06/23 08:39