центр отзывчивой галерея миниатюр

Question

Вот мой сайт:

http://www.gregorydanelian.comule.com/ken

Я хочу эскиз галереи быть сосредоточена во все времена, но у меня возникают проблемы, делая это.

Я знаю, что могу использовать

text-align: center; 

На родительском элементе, а затем установить эскизы так:

display: inline-block; 

Однако ничего не работает, эскизы всегда поплавка влево.

Я попытался добавить медиазапросы заставить запас слева (например):

@media (max-width: 767px) { 
.thumbnails{ 
margin-left: 40px!important; 
} 
} 

Но должно быть более простой способ, чтобы просто получить ул до центра, независимо от того, что ширина ,

Как можно разместить галерею миниатюр на всех ширинах браузера?

Answer 1

Добавьте эти изменения и удалить те left-margins установить !important на ul

.thumbnails > li { 
    display: inline-block; 
    float: none; 
    margin-bottom: 20px; 
    margin-left: 20px; 
} 

.thumbnails { 
    margin: 0 auto; 
    text-align: center; 
    width: 100%; 
} 

Важно: Добавьте к этому конец файла css/mystyles.css.

Answer 2

Добавить CSS медиа запрос

@media (min-width: 1200px) 
.thumbnails { 
    max-width:1200px 
}  

вы, возможно, придется настроить медиа-запросов для нескольких экранов.