适当地垂直分布列表

Question

我已经搜索过这个问题，找到了一些类似的答案，但不完全是我要找的，所以这里是。

我有一个无序列表，需要垂直平均分布。
这是我的：

<div class="icons">
<ul>
    <li><div class="twitter-icon"><img src="images/twitter.png"></div></li>
    <li><div class="github-icon"><img src="images/github.png"></div></li>
    <li><div class="linkedin-icon"><img src="images/linkedin.png"></div></li>
</ul>
</div>

.icons {
    position:absolute;
    top:0;
    right:5%;
    height:100vh;
}
.icons ul {
    display:table;
    table-layout: fixed;
    height:100%;
    margin:0;
    padding:0;
}
.icons li {
    display: table-row;
}

这是结果：

这就是我要找的：

我希望这些信息足以解释我的问题。

Answer 1

您可以像这样使用 flexbox 显示而不是 table：

display: flex; /* define a flexbox */
flex-direction: column; /* place it vertically*/
justify-content: space-around; /* spread it vertically */

参见下面的演示：

.icons {
  position: absolute;
  top: 0;
  right: 5%;
  height: 100vh;
}

.icons ul {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  height: 100%;
  margin: 0;
  padding: 0;
}

.icons li {
  display: table-row;
}

<div class="icons">
  <ul>
    <li>
      <div class="twitter-icon"><img src="http://placehold.it/100x100"></div>
    </li>
    <li>
      <div class="github-icon"><img src="http://placehold.it/100x100"></div>
    </li>
    <li>
      <div class="linkedin-icon"><img src="http://placehold.it/100x100"></div>
    </li>
  </ul>
</div>

适当地垂直分布列表

Properly equally spreading list vertically

html

css

vertical-alignment