水平和垂直居中和浮動div的CSS/XHTML問題

我有浮動div的問題。這裏是我的網站：http://www.wokarts.com/index.php?option=com_gallery&controller=images&parent=6 水平和垂直居中和浮動div的CSS/XHTML問題

我不知道爲什麼在一些行上有4個圖像，其他人只有一個。

這裏是代碼爲它負責：

#gallery-images {margin:0 0 50px 0; display: table} 
div.image-item { 
    float:left; display: table; text-align: center; position: relative; 
    width:180px; height: 150px; 
    margin:10px 0 30px 40px; 
    vertical-align: middle; text-align: center; 
} 

div.image-item a {display: table-cell; vertical-align: middle;} 
div.image-item img {margin:auto; border:1px solid #d3d4d4;} 


#gallery-image {margin:0 0 30px 0 auto; text-align: center; display: block; width:970px; padding-bottom: 80px;} 
div.photo-item {margin: 0 auto; width:850px; display: block; text-align: center;} 
div.photo-item a.img {margin:0 auto; text-align: center; }

來源

2011-07-29 mario199

我建議拿出'display：table;'，這可能是問題所在。另外，「vertical-align」實際上爲您做了多少，並且可以將其刪除？ –

嘗試display:inline-block;。

div.image-item { display: -moz-inline-block; display:inline-block; zoom:1; *display:inline; vertical-align:top; width:180px; margin:10px 0 30px 40px; vertical-align: middle; text-align: center; }

來源

2011-07-29 13:43:03 sqwk

我增加了「圖像項目」類中的高度值，它運行良好。感謝這麼快的回覆:) – mario199

變化div.image-item到inline-block，我的顯示器將修改有該div內的圖像中心。

來源

2011-07-29 13:44:25 ngen

當你離開這樣的浮動元素時，只要它們不再適合一行，下一個浮動元素只會在需要時下降，直到它適合。

例如，第5張圖像「卡住」在第3張圖像的底部，而不是一直移動回到左側的邊緣，因爲第4張圖像不夠高。

對於第10張圖像，這種情況沒有發生，因爲第9張圖像比其餘所有圖像高，所以只要第10張圖像下降到第9張圖像的邊緣以下，就會清除整個圖像行。

如果您通過填充替換邊距並將邊框添加到.image-item，您會更清楚地看到我的意思。

要強制每行的第一項到下一行的開頭，您應該不使用浮動，將包含4個項目的每一行都包含在包含div中，或使用CSS3的魔力清除浮動在每一行的開始：

.image-item:nth-child(4n+1) { clear:left }

來源

2011-07-29 13:57:10 mercator

水平和垂直居中和浮動div的CSS/XHTML問題

回答

相關問題