難度上的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; 
}