如何使页脚元素（图像和标签）居中？

Question

使用此 question 中的代码，我通过创建一个列表创建了一个页脚，该列表的元素是另一个列表，该列表具有两个元素（一个图像和一个标签）。

我正在尝试制作这样的页脚：

但是，我有这样的页脚：

页脚 div 居中，但元素不居中，因为第一个列表的 li 元素的宽度为 33%。如何使页脚元素像绿色页脚一样居中？另外，请使用百分比而不是像素来指定 widths/heights，因为我想让这个网站响应不同的 resolutions/pixel 大小。

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

为什么所有这些布局你都可以，但它们在每个图标和它的文本中都是一个 div 并给它一个 [display:inline-block] 并通过 presentage 给它设置一个 [max-width] [或注意] 它会以任何方式保持响应，因为它不会占用很长时间。

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 2

亲爱的@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 -->

Answer 3

您收到了一些不好的建议。您的示例所做的与使用表格进行布局一样糟糕（在某种程度上更糟）。您的图像 + 标题不是列表，因此不属于列表元素。给你一个理由：屏幕阅读器将阅读：列表，x 项...然后再次列出，2 项...并且您正在复制 link 元素，这是有风险的，并且取决于您处理图像的方式导致 'empty link' 警告，并且在检查可访问性时肯定会重复 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>

为了您的方便，我添加了边框。（还有我的。）

来晚了，但这应该可以。它以我的屏幕为中心。

如何使页脚元素（图像和标签）居中？

How to make footer elements (image and label) centered?

html

css

footer

html-lists