Question

我想在我网站的页脚中对齐一个链接列表，但无论我尝试什么，它似乎都不会在页脚的中心对齐（例如在w3schools页脚中）。

我尝试过使用display: block，display: inline-block，text-align: center和其他人，但无论我做什么，我都无法做到这一点。

CSS：

footer ul {
  list-style: none;
  text-align: center;
  }

footer div {
  margin: 0 auto;
  display: inline-block;
  }

footer {
  margin-left: 25%;
  }

HTML：

<footer>
  <div>
    <ul>
      <li><a href="#" target="_blank">Facebook</a></li>
      <li><a href="#" target="_blank">Twitter</a></li>
      <li><a href="#" target="_blank">Instagram</a></li>
      <li><a href="#" target="_blank">Vine</a></li> 
    </ul>
  </div>
  <div>
    <ul> 
      <li><a href="#" target="_blank">YouTube</a></li>
      <li><a href="#" target="_blank">Twitch</a></li>
      <li><a href="#" target="_blank">Mobcrush</a>
      <li><a href="#" target="_blank">SoundCloud</a></li>
    </ul>
  </div>
  <div>
    <ul>
      <li><a href="#" target="_blank">GitHub</a></li>
      <li><a href="#" target="_blank">Stack Overflow</a></li>
      <li><a href="#" target="_blank">Pastebin</a></li>
      <li><a href="#" target="_blank">Curse</a></li>
    </ul>
  </div>
  <div>
    <ul>
      <li><a href="#" target="_blank">~</a></li>
      <li><a href="#" target="_blank">~</a></li>
      <li><a href="#" target="_blank">~</a></li>
      <li><a href="#" target="_blank">~</a></li>
    </ul>
  </div>
</footer>

任何帮助都会很棒，谢谢！

Answer 1

只需在页脚上使用display:flex;。

＆＃13;

footer ul {
  list-style: none;
  text-align: center;
  }

footer div {
  margin: 0 auto;
  display: inline-block;
  }

footer {
  display:flex;
  
  }

＆＃13;

<footer>
  <div>
    <ul>
      <li><a href="#" target="_blank">Facebook</a></li>
      <li><a href="#" target="_blank">Twitter</a></li>
      <li><a href="#" target="_blank">Instagram</a></li>
      <li><a href="#" target="_blank">Vine</a></li> 
    </ul>
  </div>
  <div>
    <ul> 
      <li><a href="#" target="_blank">YouTube</a></li>
      <li><a href="#" target="_blank">Twitch</a></li>
      <li><a href="#" target="_blank">Mobcrush</a>
      <li><a href="#" target="_blank">SoundCloud</a></li>
    </ul>
  </div>
  <div>
    <ul>
      <li><a href="#" target="_blank">GitHub</a></li>
      <li><a href="#" target="_blank">Stack Overflow</a></li>
      <li><a href="#" target="_blank">Pastebin</a></li>
      <li><a href="#" target="_blank">Curse</a></li>
    </ul>
  </div>
  <div>
    <ul>
      <li><a href="#" target="_blank">~</a></li>
      <li><a href="#" target="_blank">~</a></li>
      <li><a href="#" target="_blank">~</a></li>
      <li><a href="#" target="_blank">~</a></li>
    </ul>
  </div>
</footer>

＆＃13;

Answer 2

footer {text-align: center;}
footer div { display: inline-block; }

你想完成吗？

Answer 3

尝试显示表

footer ul {
  list-style: none;
  text-align: center;
  }

footer div {
  margin: 0 auto;
  display: table;
  }

footer {
  margin-left: 25%;
  }

Answer 4

如果将页脚元素的宽度设置为50％（25％左边距+ 50％宽度留下有效的25％右边距，从而首先将页脚本身居中）并将页脚元素的文本对齐设置为中心，它将中心的页脚divs你想要的方式。但请注意，这会将子元素的文本对齐设置为居中，但在这种情况下，这似乎是您想要的。

footer {
  margin-left: 25%;
  width:50%;
  text-align: center;
}

页脚中心div

4 个答案: