Центрирование плавающих элементов в полноразмерном div

Question

Я работаю на странице каталога продуктов, и группа изображений должна быть сосредоточена, но мне еще предстоит найти способ сделать это, так как все они размещены в div, что составляет 100% в ширину.

Я ищу способ центрировать эти изображения горизонтально, не теряя гибкости своих плавающих свойств.

Вот ссылка на каталог на сайте: http://internetvolk.de/katalog/

Answer 1

попробуйте использовать display: inline-block; istead плавающих и добавить text-align: center их родительский контейнер)

Answer 2

если вы даете #katalog ширину - рассчитать, из числа изображений и их полей. например

#katalog{ 
width: 960px; /*just an example*/ 
margin: 0 auto; 
} 

Answer 3

Augment со следующими правилами:

#katalog { 
    text-align: center; 
} 

и

.imageLink { 
    /** float: left; <-- REMOVE! */ 
    display: inline-block; 
} 

Answer 4

#katalog { 
    margin: 10px auto 0; 
    overflow-y: hidden; 
    max-width: 940px; 
    min-width: 810px; 
} 

Использование max-height и min-height, чтобы сохранить гибкость, я определяю max-width держать его по центру все экраны, добавив margin: 0 auto;