难以在html + css网站上居中图像

Question

我为朋友创建了一个网站：http://personaltrainerffm.de/

下面的徽标（见图片）不会显示在中心位置。此外，当使用移动设备浏览时，它将被搞砸。你能帮忙吗？

非常感谢你提前

Screenshot on smartphone

Answer 1

这些徽标容器（.container-erfahr ul li）在CSS中都设置了float: left。由于第二个高于第三个，第四个位于移动视图中的第三个（即第二个的右侧）下方 - 这就是浮动的工作方式。

要解决此问题并将其居中，请删除float:left并将其全部定义为display: inline-block。要使元素居中，请将text-align: center添加到其容器元素.container-erfahr中。

这些是已更改的规则：

.container-erfahr ul li {
    display: inline-block;
    margin: 30px;
    padding: 0px;
    border: 0px solid lightgray;
    list-style: none;
}

.container-erfahr {
    margin-top: 100px;
    margin-left: 0px;
    text-align: center;
}