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

我正在制作一个自定义主页，其中有多个链接列表彼此相邻。然而，我不知道如何在保持我想要的格式的同时使它们都居中。这是主页的外观：

---

我如何使链接列表集中在页面中间，但仍然格式化为像图片中的另一个相邻？这里有一个index.html文件的粘贴箱：和一个style.css文件：供参考。

您可以使用flex box

在父容器中包含所有.all div，并在其上显示display:flex

这就是你所需要的。这是你能做的

正文{
背景色:#282828 ;；
}
h3{
颜色：#ebdbb2；
字体系列：“Roboto Mono”，monospace；
}
h1{
字体系列：“Pacifico”，草书；
文本对齐：居中；
颜色：#ebdbb2；
字号:90 ;；
}
a{
颜色：继承；
文字装饰：无；
}
名单{
文本对齐：居中；
文字装饰：无；
}
.集装箱{
显示器：flex；
调整项目：灵活启动；
}
.链接{
边缘顶部：20px；
}
.全部{
显示器：flex；
弯曲方向：立柱；
填充：20px；
}
.谷歌{
文本对齐：居中；
背景色：#cc241d；
宽度：200px；
}
雷迪特先生{
文本对齐：居中；
背景色：#458588；
宽度：200px；
}
.编程{
文本对齐：居中；
背景色：#689d6a；
宽度：200px；
}
.游戏{
文本对齐：居中；
背景色：#d65d0e；
宽度：200px；
}
.linux{
文本对齐：居中；
背景色：#98971a；
宽度：200px；
}
.链接{
文本对齐：居中；
颜色:#282828 ;；
字体系列：“Roboto Mono”，monospace；
文字装饰：无；
字体大小：粗体；
背景色：#ebdbb2；
宽度：200px；
}

你好 谷歌 雷迪特 程序设计 游戏 linux

---

您可以使用

内联块的
显示
。然后应用
顶部的
垂直对齐
，使标题显示在顶部。我给了你的小组标题一个
title
类来简化CSS

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



正文{
背景色:#282828 ;；
文本对齐：居中；
}
h3{
颜色：#ebdbb2；
字体系列：“Roboto Mono”，monospace；
}
h1{
字体系列：“Pacifico”，草书；
文本对齐：居中；
颜色：#ebdbb2；
字号:90 ;；
}
a{
颜色：继承；
文字装饰：无；
}
名单{
文本对齐：居中；
文字装饰：无；
}
.全部{
显示：内联块；
垂直对齐：顶部；
自对准：居中；
左边距：1米；
}
.全部：第n名子女（1）{
左边距：0；
}
.头衔{
文本对齐：居中；
宽度：12em；
}
.谷歌{
背景色：#cc241d；
}
雷迪特先生{
背景色：#458588；
}
.编程{
背景色：#689d6a；
}
.游戏{
背景色：#d65d0e；
}
.linux{
背景色：#98971a；
}
.链接{
文本对齐：居中；
颜色:#282828 ;；
字体系列：“Roboto Mono”，monospace；
文字装饰：无；
字体大小：粗体；
背景色：#ebdbb2；
宽度：12em；
}
你好
谷歌
雷迪特
程序设计
游戏
linux
使用jsfiddle.net创建一个工作示例这太完美了。谢谢你的帮助！