我正在制作一个自定义主页,其中有多个彼此相邻的链接列表。但是,我不知道如何使它们全部居中,同时仍然保留我想要的格式。主页如下所示:
如何使链接列表在页面中间居中放置,但仍设置为彼此相邻,如图所示?这是我的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>