Question

所以我正在制作这个网站来展示自行车旅行。用户可以通过输入他们的ID来搜索旅行。当他们按下搜索按钮时，行程将出现在浏览器中。我遇到的问题是我希望它们居中并且不向左浮动。这可能看起来像一个简单的问题，但我尝试了几个东西，我没有选择。问题实际上是我的div的宽度，包含所有行程，与我的页面宽度相同。这使我无法左右使用automargins。我想在屏幕的宽度上显示尽可能多的图像，但是当我遗漏浮动时：左边，它们只出现在另一个之上。网站链接：Just type CW1A1 as GroupID and click search to see the trips

#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: ~~middle~~ 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;
}

div中心图像的最大宽度

2 个答案: