центральные изображения в div с максимальной шириной

Question

Итак, я делаю этот сайт для показа велосипедных поездок. Пользователи могут искать поездки, введя свой идентификатор. Когда они нажимают кнопку поиска, поездки будут отображаться в браузере. Проблема в том, что я хочу, чтобы они были центрированы и не плавали влево. Это может показаться простой проблемой, но я попробовал несколько вещей, и у меня не было вариантов. Проблема в том, что ширина моего div, содержащая все поездки, совпадает с шириной моей страницы. Это отключает меня, чтобы использовать автоархины влево и вправо. Я хочу отображать как можно больше изображений по ширине моего экрана, но когда я оставляю float: left, они появляются только один над другим. Ссылка на сайт: 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: средний top; ... ваш последний ДИВ получал немного из линии там.

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