如何在页脚中居中放置图像

新手在这里！我期待为本网站调整一些代码：http://www.lakeofstars.org 如何在页脚中居中放置图像

页面底部的页脚区域包含一系列徽标。理想的做法是确保页脚中的徽标图像在移动设备上正确显示（如果它们太大，某些徽标会下降到指定页脚背景下方），而且还会让它们在桌面上正确居中 - 我们会看到，他们目前在左边轻推。

下面的代码，因为它主张：

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

来源

2015-06-23 Pádraic

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

来源

2015-06-23 10:12:22

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

来源

2015-06-23 10:08:35

增加对#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 

}

来源

2015-06-23 10:18:29 Dmitriy

删除宽度：汽车...给百分比值....

#footer .structure li img

来源

2015-06-23 10:25:15 Muthu

如何在页脚中居中放置图像

回答

相关问题