以最大宽度在div中居中图像

Question

因此，我正在制作此网站来显示自行车旅行。 用户可以通过输入ID来搜索旅行。 当他们按下搜索按钮时，行程将显示在浏览器中。 我的问题是我希望它们居中而不向左浮动。 这似乎是一个简单的问题，但是我尝试了几件事，但没有其他选择。 问题实际上是包含所有行程的div的宽度与页面的宽度相同。 这使我无法使用左右自动边距。 我想在屏幕的宽度上显示尽可能多的图像，但是当我省略float：left时，它们只会出现在另一个之上。 网站链接： 只需输入CW1A1作为GroupID，然后点击搜索即可查看行程

#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;
}

Answer 1

我认为，只要您有float: left ，您的元素就会开始……等待它……向左浮动。

我想出的最好的选择是摆脱浮动，并添加display: inline-block 。

哦，确保您添加了vertical-align: 中间 top; ...您的最后一个div在那儿有点偏离。

Answer 2

尝试使用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;
}