難以在 html+css 站點上居中圖像

Question

我為朋友創建了一個網站： http : //personaltrainerffm.de/

並且下方的徽標（參見圖片）不會居中顯示。 此外，當使用移動設備瀏覽時，它會被搞砸。 你能幫忙嗎？

非常感謝您提前

智能手機上的截圖

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