在全角div中居中浮动元素

Question

我正在开发产品目录页面，并且图像组需要居中，但我还没有找到一种方法，因为它们都是在宽度为100％的div中浮动的。

我正在寻找一种方法来水平居中这些图像，而不会失去浮动属性的灵活性。

以下是网站目录的链接：http://internetvolk.de/katalog/

Answer 1

尝试使用display: inline-block;代替浮动并将text-align: center添加到其父容器中

Answer 2

使用以下规则进行扩充：

#katalog {
    text-align: center;
}

和

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

Answer 3

如果给#katalog一个宽度 - 根据图像数量及其边距计算。 e.g。

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

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;以使其在所有屏幕中居中