html - 在页脚中居中 div

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

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

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

footer {
  display:flex;
  
  }

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