Question

我的网站页脚现在几乎没有链接，如下所示，将来可能会有N个链接。基本上我想将链接对齐到页脚的中心。我知道如果我将固定的宽度或位置添加到我写的下面的CSS中它会起作用。但我不想设置任何固定的宽度，因为链接的数量将来会增加。将链接与中心对齐的最佳方法是什么。

HTML CODE

  <footer>
      <ul>
          <li> <a href="#">Home</a></li>
          <li><a href="#">About Us</a></li>
          <li><a href="#">Services</a></li>
          <li><a href="#">Contact Us</a></li>          
      </ul>
   </footer>

CSS

  footer{
      background: #EEEEEE;
      margin: 0 auto;
      height: 30px;
      padding-top: 20px;
      width: 100%;
      text-align: center;
  }
  footer ul{
  margin: 0px;
  }
  footer li {
      float: left;
      list-style-type: none;
      line-height: 9px;
      height: 11px;
      border-right: 1px solid #354052;
      padding: 0px 10px;
  }
  footer li a{
      text-decoration: none;
      color: #354052;
      font-size: 12px;
  }

Answer 1

试试这个

footer{
      background: #EEEEEE;
      margin: 0 auto;
      height: 30px;
      padding-top: 20px;
      width: 100%;
      text-align: center;
  }
  footer ul{
  margin: 0px;
    padding:0;
  }
  footer li {
    /*  float: left;  */
      list-style-type: none;
      line-height: 9px;
      height: 11px;
      border-right: 1px solid #354052;
      padding: 0px 10px;
    display:inline;
  }
  footer li a{
      text-decoration: none;
      color: #354052;
      font-size: 12px;
  }

<footer>
      <ul>
          <li> <a href="#">Home</a></li>
          <li><a href="#">About Us</a></li>
          <li><a href="#">Services</a></li>
          <li><a href="#">Contact Us</a></li>          
      </ul>
   </footer>

Answer 2

因为您对所有列表项都有float:left，所以总是将它们推到父div的最左侧，并且不会被文本对齐CSS调用覆盖。

所以解决这个问题的简单方法是：

摆脱列表项上的浮动并将其显示为内联块。

您可能不需要，但我也要确定，更改列表中的边距以尝试将项目居中。

https://jsfiddle.net/leecollingsco/emaqyxbv/

注意：我必须使用您的其他一些CSS来实现与您在原始屏幕截图中显示的相同样式，因为移除浮动项目会影响这一点。

Answer 3

只需将display: flex;提交给footer和

footer ul {
    margin: 0 auto;
}

会为你效劳。

<强> Working Fiddle

Answer 4

footer li {
    /* float: left; */
    display: inline-block;
}

我从你的LI元素中移除了浮动，并使其成为内联块。然后它应该尊重text-align：center from the parent。

Answer 5

你可以试试这段代码：

footer{
      background: #EEEEEE;
      margin: 0 auto;
      height: 30px;
      padding-top: 20px;
      width: 100%;
      text-align: center;
  }
  footer ul{
      margin: 0px;
      clear:both;
      text-align:center;
  }
  footer ul li {
      list-style-type: none;
      display:inline-block;       
      border-right: 1px solid #354052;
      padding: 5px;
      margin: 5px;
  }
  footer ul li a{
      text-decoration: none;
      color: #354052;
      font-size: 12px;
  }

Answer 6

footer ul {
    width:400px;
    margin: 0 auto;
}

根据您的设计更改宽度，其余代码也可以。祝你好运！

如果有帮助，请标记此答案。

将页脚中的列表与中心对齐

6 个答案: