css - 让 HTML 中的一组彼此相邻的对象居中

Question

我正在制作一个自定义主页，其中有多个彼此相邻的链接列表。但是，我不知道如何让它们全部居中，同时仍保留我想要的格式。主页如下所示:

如何使链接列表在页面中间居中，但仍保持格式为彼此相邻，如图所示？这是我的index.html 文件的pastebin:http://pastebin.com/wW1GzUUJ和我的 style.css 文件之一:http://pastebin.com/BsHd42ED供引用。

Answer 1

您可以使用 flexbox 。

将所有 .all div 包含在父容器中，并在其上添加 display: flex 。

这就是您所需要的。这是您可以做的。

body {
  background-color: #282828;
}
h3 {
  color: #ebdbb2;
  font-family: 'Roboto Mono', monospace;
}
h1 {
  font-family: 'Pacifico', cursive;
  text-align: center;
  color: #ebdbb2;
  font-size: 90;
}
a {
  color: inherit;
  text-decoration: none;
}
list {
  text-align: center;
  text-decoration: none;
}
.container {
  display: flex;
  align-items: flex-start;
}
.links {
  margin-top: 20px;
}
.all {
  display: flex;
  flex-direction: column;
  padding: 20px;
}
.google {
  text-align: center;
  background-color: #cc241d;
  width: 200px;
}
.reddit {
  text-align: center;
  background-color: #458588;
  width: 200px;
}
.programming {
  text-align: center;
  background-color: #689d6a;
  width: 200px;
}
.gaming {
  text-align: center;
  background-color: #d65d0e;
  width: 200px;
}
.linux {
  text-align: center;
  background-color: #98971a;
  width: 200px;
}
.links {
  text-align: center;
  color: #282828;
  font-family: 'Roboto Mono', monospace;
  text-decoration: none;
  font-weight: bold;
  background-color: #ebdbb2;
  width: 200px;
}

<h1>Hello</h1>
<div class="container">
  <div class="all">
    <div class="google">
      <h3>google</h3>
    </div>
    <div class="links">
      <a href="https://www.google.com">
        <p>google</p>
      </a>
      <a href="https://www.youtube.com/feed/subscriptions">
        <p>youtube</p>
      </a>
      <a href="https://drive.google.com/drive/my-drive">
        <p>drive</p>
      </a>
      <a href="https://mail.google.com/mail/u/0/#inbox">
        <p>gmail</p>
      </a>
      <a href="https://play.google.com/books">
        <p>books</p>
      </a>
    </div>
  </div>
  <div class="all">
    <div class="reddit">
      <h3>reddit</h3>
    </div>
    <div class="links">
      <a href="https://www.reddit.com/">
        <p>front</p>
      </a>
      <a href="https://www.reddit.com/r/linux/">
        <p>/r/linux</p>
      </a>
      <a href="https://www.reddit.com/r/unixporn/">
        <p>/r/unixporn</p>
      </a>
      <a href="https://www.reddit.com/r/chemistry/">
        <p>/r/chemistry</p>
      </a>
    </div>
  </div>
  <div class="all">
    <div class="programming">
      <h3>programming</h3>
    </div>
    <div class="links">
      <a href="https://github.com/">
        <p>github</p>
      </a>
      <a href="https://www.codecademy.com/learn">
        <p>codecademy</p>
      </a>
      <a href="http://stackoverflow.com/">
        <p>stack overflow</p>
      </a>
    </div>
  </div>
  <div class="all">
    <div class="gaming">
      <h3>gaming</h3>
    </div>
    <div class="links">
      <a href="http://store.steampowered.com/">
        <p>steam</p>
      </a>
      <a href="https://www.gog.com/">
        <p>gog</p>
      </a>
    </div>
  </div>
  <div class="all">
    <div class="linux">
      <h3>linux</h3>
    </div>
    <div class="links">
      <a href="https://wiki.archlinux.org/">
        <p>archwiki</p>
      </a>
      <a href="https://aur.archlinux.org/">
        <p>aur</p>
      </a>
      <a href="https://forum.antergos.com/">
        <p>antergos</p>
      </a>
    </div>
  </div>
</div>