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

Question

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

如何才能使链接列表在页面中间集中在一起，但仍像图片中那样被格式化为彼此相邻？这是我的 index.html 文件的 pastebin：http://pastebin.com/wW1GzUUJ and one of my style.css file: http://pastebin.com/BsHd42ED 供参考。

Answer 1

你可以使用 flex box。

将所有 .all div 包含在父容器中，并在其上显示：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://whosebug.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>

Answer 2

您可以为 .all 元素使用 inline-block 的 display。然后应用 top 的 vertical-align，以便标题显示在顶部。我给你的组标题 title class 来简化 CSS 一点。

这是我在 JSFiddle 中创建的动态版本。您可以在群组中添加或删除链接，或者创建新的 on-the-fly 并带有 JSON object.

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://whosebug.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>

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

Have a group of objects next to each other in HTML be centered

html

css

webpage