Как сделать элементы нижнего колонтитула (изображение и этикетку) центрированными?

Question

Используя код из этого question, я создал нижний колонтитул, создав список, элементы которого представляют собой другой список, который имеет два элемента (изображение и метку).

Я пытаюсь сделать подвал, как это:

Однако, у меня есть подвал, как это:

Колонтитул ДИВ центрирован, но элементы не потому, что ширина из элементов li первого списка составляет 33%. Как сделать элементы нижнего колонтитула центрированными, как зеленый нижний колонтитул? Кроме того, пожалуйста, используйте проценты, а не пиксели для указания ширины/высоты, потому что я хочу, чтобы этот сайт реагировал на разные разрешения/размеры пикселей.

HTML:

<div class = "footer>  
    <ul> 
      <li > 
      <ul> 
       <li> <a href="" target="_blank"><img class = "footerImage" /> </a> </li> 
       <li> <a class = "iconTitle" href="" target="_blank"> Resume </a> </li> 
      </ul> 
      </li> 
      <li > 
      <ul> 
       <li> <a href="" target="_blank"><img class = "footerImage" /> </a> </li> 
       <li> <a class = "iconTitle" href="" target="_blank"> GitHub </a> </li> 
      </ul> 
      </li> 
      <li > 
      <ul> 
       <li> <a href="" target="_blank"><img class = "footerImage" /> </a> </li> 
       <li> <a class = "iconTitle" href="" target="_blank"> LinkedIn </a> </li> 
      </ul> 
      </li>    
    </ul> 
</div> 

Примечание: Код для img тега укорачивается для простоты.

CSS:

.footer ul { 
    list-style-type: none; 
    width: 90%; 
    text-align: center; 

    /*Removes indentation*/ 
    margin: 0 auto; 
    padding: 0; 
} 

.footer .iconTitle { 
    position: initial; /*Remove posiiton: absolute that's applied to icons in About Me page*/ 
} 

.footerImage { 
    width: 100%; 
} 

.footer ul > li { 
    display: inline-block; 
    width: 33%; 
} 

.footer ul > li > ul { 
    display: block; 
    width: 100%; 
} 

.footer ul > li > ul > li { 
    display: block; 
} 

Answer 1

You» были даны некоторые плохие советы. То, что делает ваш пример, так же плохо (хуже, в некотором смысле), как использование таблиц для макета. Ваше изображение + подпись не являются списками, поэтому они не принадлежат элементам списка. Чтобы дать вам повод: на экране прочтения читаются: list, x items ... затем снова список, 2 элемента ... и вы дублируете свой элемент ссылки, что является рискованным и в зависимости от того, как вы обрабатываете ваши изображения, может привести к «пустым» link 'и обязательно дублировать предупреждения ссылок при проверке доступности.

Вот пример того, как это сделать лучше, также фиксируя проблему центрирующую:

.footer ul { 
    list-style-type: none; 
    width: 90%; 
    text-align: center; 

    /*Removes indentation*/ 
    margin: 0 auto; 
    padding: 0; 
    border: solid 1px red; 
} 

.footer ul > li { 
    display: inline-block; 
    width: 33%; 
    border: solid 1px green; 
    box-sizing: border-box; 
} 

figure { 
    display: block; 
    margin: 0; 
    width: 100%; 
    height: auto; 
    border: solid 1px yellow; 
} 

figure img { 
    margin-left: auto; 
    margin-right: auto; 
    border: solid 1px pink; 
} 

figcaption { 
    display: block; 
    margin-left: auto; 
    margin-right: auto; 
    border: solid 1px grey; 
} 

<div class="footer">  
    <ul> 
     <li> 
     <a href="" target="_blank"><figure><img class = "footerImage" /><figcaption>Resume</figcaption></figure></a> 
     </li> 
     <li> 
     <a href="" target="_blank"><figure><img class = "footerImage" /><figcaption>Github</figcaption></figure></a> 
     </li>  
     <li> 
     <a href="" target="_blank"><figure><img class = "footerImage" /><figcaption>Resume</figcaption></figure></a> 
     </li>    
    </ul> 
</div> 

я добавил границы для вашего удобства. (И мой.)

Здесь поздно, но это должно сработать. Он сосредоточился на моем экране.

Answer 2

почему все это расположение вы можете, но их в каждой иконе и его текст на один DIV и дать ему [Дисплей: встроенный блок] и установите [макс ширину ] путем представления к нему [или заметьте], он будет реагировать любым образом, потому что он не займет много места.

footer { 
 
    padding-bottom: 30px; 
 
    background: #ccc; 
 
    text-align: center; 
 
} 
 
footer .icon-block { 
 
    display: inline-block; 
 
    max-width: 33.333%; 
 
    padding: 0 15px; 
 
    margin-top: 30px; 
 
}

<footer> 
 
    <div class="icon-block"> 
 
    <a href="" target="_blank"><img class="footerImage" /></a> 
 
    <a class="iconTitle" href="" target="_blank"> GitHub </a> 
 
    </div> 
 
    <div class="icon-block"> 
 
    <a href="" target="_blank"><img class="footerImage" /></a> 
 
    <a class="iconTitle" href="" target="_blank"> GitHub </a> 
 
    </div> 
 
    <div class="icon-block"> 
 
    <a href="" target="_blank"><img class="footerImage" /></a> 
 
    <a class="iconTitle" href="" target="_blank"> GitHub </a> 
 
    </div> 
 
</footer>

Answer 3

Уважаемый @ 15ongm для вашей информации я только изменить OP более простой и понятной принять это, если вы хотите

.footer ul { 
 
    list-style-type: none; 
 
    width: 100%; 
 
    text-align: center; 
 
    /*Removes indentation*/ 
 
    margin: 0 auto; 
 
    padding: 0; 
 
} 
 
img { 
 
    width:50px; 
 
    height:50px; 
 
    display:block; 
 
    background:#000; 
 
    margin:0 auto; 
 
} 
 
.footer ul > li { 
 
    display: inline-block; 
 
    padding:15px; 
 
} 
 
.footer ul > li a { 
 
    display:block; 
 
    text-align:center; 
 
} 
 
.footer ul > li a span { 
 
    display:block; 
 
}

<div class="footer"> 
 
    <ul> 
 
     <li><a href="" target="_blank"><img class = "footerImage" /><span>Resume</span> </a></li> 
 
     <li><a href="" target="_blank"><img class = "footerImage" /><span>GitHub</span> </a></li> 
 
     <li><a href="" target="_blank"><img class = "footerImage" /><span>LinkedIn</span> </a></li> 
 
    </ul> 
 
</div><!-- /.footer -->