以div爲單位的最大寬度的中心圖像

所以我正在使這個網站顯示自行車旅行。用戶可以通過輸入他們的ID來搜索旅行。當他們按下搜索按鈕時，這些行程將出現在瀏覽器中。我遇到的問題是我希望它們居中，而不是向左移動。這可能看起來像一個簡單的問題，但我嘗試了幾件事情，並用盡了選擇。問題在於，我的div的寬度（包含所有行程）與我的頁面寬度相同。這使我無法左右使用automargins。我想在屏幕寬度上顯示儘可能多的圖像，但是當我忽略浮動：左側時，它們只會出現在另一個之上。網站的鏈接：Just type CW1A1 as GroupID and click search to see the trips 以div爲單位的最大寬度的中心圖像

#tripimages p { 
    cursor:pointer; 
    float:left; 
    position: relative; 
    text-align:center; 
    color:black; 
    margin:10px; 
    padding:0; 
    border:0; 
    width:250px; 
    height:50px; 
    padding-top:250px; 
} 

#tripimages { 
    text-align:center; 
    padding-bottom:50px; 
    min-height: 100%; 
    overflow-y: hidden; 
    position: relative; 
}

來源

2014-12-03 Hans Cauwenbergh

通過使用百分比餘量，您可以更接近您的目標..'#tripimages p {margin-left：6％}'但它仍然不會完美居中，除非您爲屏幕制定特定的佈局大小使用媒體查詢。 – 2014-12-03 21:43:53

嘗試我覺得只要你有float: left，你的元素去......等待...左浮動。

我想出的最佳選擇是擺脫浮動，並添加display: inline-block。

哦，並確保你添加vertical-align: 中 top; ......你的最後一個div在那裏變得有點過分。

來源

2014-12-03 21:36:27 philtune

'垂直對齊'的好處... – rfornal 2014-12-03 21:39:32

只需添加，在某些情況下（浮動）將不足以滿足要求（圖像尺寸不相等時）。請繼續嘗試[砌體]（http://masonry.desandro.com/） – Jashwant 2014-12-03 21:39:45

謝謝隊友！這樣做的訣竅，但有沒有辦法讓最後一行圖像在上面的圖像下方垂直對齊？ – 2014-12-03 22:03:05

使用display: inline-block;

#tripimages p { 
    display: inline-block 
    cursor:pointer; 
    position: relative; 
    text-align:center; 
    color:black; 
    margin:10px; 
    padding:0; 
    border:0; 
    width:250px; 
    height:50px; 
    padding-top:250px; 
}

來源

2014-12-03 21:33:49

b，我寫的是正確的，因爲你張貼。 – philtune 2014-12-03 21:37:01

以div爲單位的最大寬度的中心圖像

回答

相關問題