如何在頁腳中居中放置圖像

新手在這裏！我期待爲本網站調整一些代碼：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

如何在頁腳中居中放置圖像

回答

相關問題