Question

使用此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更简单明了如果您想要

＆＃13;

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

＆＃13;

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

＆＃13;

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项......你正在复制你的链接元素，这是有风险的，取决于你如何处理你的图像可能导致＆＃ 39;空链接＆＃39;检查辅助功能时警告和明确重复的链接警告。

以下是一个如何做得更好的例子，同时也解决了您的中心问题：

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

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

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

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

3 个答案: