以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为单位的最大宽度的中心图像

回答

相关问题