在HTML中有一組彼此相鄰的對象被集中

Question

我正在製作一個自定義主頁，其中有多個鏈接相鄰列表。但是，我不知道如何讓它們都保持中心，同時保留我想要的格式。這是主頁的樣子：

如何使鏈接列表在頁面中間集中在一起，但仍然格式化爲像圖片一樣彼此相鄰？這裏是我的index.html文件的一個pastebin：http://pastebin.com/wW1GzUUJ和我的一個style.css文件：http://pastebin.com/BsHd42ED作爲參考。

Answer 1

您可以使用inline-block一個display您.all元素。然後應用top的vertical-align，以便標題出現在頂部。我給你的小組標題一類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>

Answer 2

您可以使用彈性盒。

包含父容器中的所有.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://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>