html - 使一组在HTML中彼此相邻的对象居中

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

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

最佳答案

您可以将display的inline-block用作.all元素。然后应用vertical-align的top，以便标题显示在顶部。我给您的组标题提供了title类，以简化CSS。

这是我在JSFiddle中创建的动态版本。您可以从组中添加或删除链接，也可以使用JSON对象即时创建新的链接。


  https://jsfiddle.net/44b5oj4z/1/

body {
  background-color: #282828;
  text-align: center;
}

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

.all {
  display: inline-block;
  vertical-align: top;
  align-self: center;
  margin-left: 1em;
}

.all:nth-child(1) {
  margin-left: 0;
}

.title {
  text-align: center;
  width: 12em;
}

.google {
  background-color: #cc241d;
}

.reddit {
  background-color: #458588;
}

.programming {
  background-color: #689d6a;
}

.gaming {
  background-color: #d65d0e;
}

.linux {
  background-color: #98971a;
}

.links {
  text-align: center;
  color: #282828;
  font-family: 'Roboto Mono', monospace;
  text-decoration: none;
  font-weight: bold;
  background-color: #ebdbb2;
  width: 12em;
}

<h1>Hello</h1>
<div class="all">
  <div class="title 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="title 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="title 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="title 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="title 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>