Как центрировать изображения в нижнем колонтитуле

Question

Новичок здесь! Я хочу скорректировать код для этого сайта: 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; 
} 

Answer 1

Вы должны удалить float: left; из #footer .structure li.
Попробуйте использовать line-height и vertical-align: middle; для вертикального ALIGMENT и 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 2

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