css - 如何使页脚中的图像居中

Question

这里是新手!我正在为这个网站调整一些代码:http://www.lakeofstars.org

每页底部的页脚区域包含一系列 Logo 。理想的做法是确保页脚中的 Logo 图像在移动设备上正确显示(如果它们太大，一些 Logo 会下降到指定的页脚背景下方)，但也要让它们在桌面上正确居中 - 因为你'你会看到，它们目前被微移到左边。

这是目前的代码:

#footer {
    position:absolute;
    bottom:0;
    width:100%;
    height:140px;           /* Height of the footer */
    background:#ffffff;
    border-top: solid 3px #ffc600;
    background-image:url(img/global/footer.gif);
    background-repeat: repeat-x;
    background-position:bottom;
}


#footer .structure {
    height: 140px;
    width: 94%;
}

#footer .structure li {
    display: inline-block;
    margin: 10px 10px 0 0;
    float: left;
}

#footer .structure li img {
    height: 65px;
    width: auto;
}

Answer 1

您需要从 #footer .structure li 中删除 float: left;。
尝试使用 line-height 和 vertical-align: middle; 进行垂直对齐，使用 text-align: center; 进行水平对齐:

#footer .structure {
    text-align: center;
}
#footer .structure ul {
    line-height: 140px;
    vertical-align: middle;
}
#footer .structure li {
    display: inline-block;
}

或者您可以使用 flexbox technique