Question

新手在这里！我正在调整此网站的一些代码：http://www.lakeofstars.org

每个页面底部的页脚区域包含一系列徽标。理想的是确保页脚中的徽标图像在移动设备上正确显示（如果它们太大，某些徽标下降到指定的页脚背景下方），还要使它们在桌面上正确显示 - 正如您所说＆＃ 39;看，他们目前被推到左边。

这里是代码：

#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 {
    position:absolute;
    bottom:0;
    width:100%;
    height:140px;
    background:#ffffff;
    border-top: solid 3px #ffc600;
    background-image:url(img/global/footer.gif) scroll 50% 50%;
    background-repeat: repeat-x;
    background-position:bottom;
}

Answer 2

您需要从float: left;中删除#footer .structure li 尝试使用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

Answer 3

添加#footer .structure ul - text-align: center;

删除#footer .structure li - float: left

#footer .structure ul {
   text-align: center; < -- add
}
#footer .structure li {
    display: inline-block;
    vertical-align: middle;
    margin: 10px 10px 0 0;
   /* float: left;*/ <-- remove

}

Answer 4

删除宽度：自动...以百分比形式给出值....

#footer .structure li img

如何在页脚中居图像

4 个答案: