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

Question

使用这个问题的代码，我创建了一个页脚，通过创建一个列表，其元素是另一个列表，它有两个元素（图像和标签）。

我试图像这样做一个页脚：

但是，我有一个这样的页脚：

页脚div居中，但元素不是因为第一个列表的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

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

为什么所有这些布局你可以但它们在每个图标和它的文本到一个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 3

你得到了一些不好的建议。 你的例子所做的就像使用表格进行布局一样糟糕（更糟糕的是，在某种程度上）。 您的图片+标题不是列表，因此不属于列表元素。 给你一个理由：屏幕阅读器会读取：列表，x项......然后再列出，2项...你正在复制你的链接元素，这是有风险的，取决于你如何处理你的图像可能导致'空在检查辅助功能时链接'警告并且肯定会重复链接警告。

以下是一个更好地完成工作的示例，同时修复了您的居中问题：

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

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

现在已经很晚了，但这应该有效。 它以我的屏幕为中心。