Flexbox对齐项目：中心位置不完美

Question

我在使用flexbox工具时遇到问题align-items:center;在中间并不完美，但文字，图标上有几个像素太高......有人知道如何解决这个问题吗？

screenshot how it looks like

例如，这是我用于帖子项目的html / css代码。

＆＃13;

＆＃13;

.post-item {
  background-color: white;
  height: 80px;
  padding: 30px;
  font-family: 'Helvetica';
  margin-bottom: 10px;
  display: flex;
  align-items: center;
}

＆＃13;

<tbody>
  <tr class="post-item">
    <td class="post-title">
      <a href="#">Hier komt de titelddd</a>
    </td>
    <td class="post-author">
      <div>Chickmeister69</div>
    </td>
    <td class="post-date">
      <div>18/09/17 - 00:33</div>
    </td>
    <td class="post-go">
      <img src="assets/go_forward_arrow.svg" alt="go">
    </td>
  </tr>
</tbody>

＆＃13;

＆＃13;

＆＃13;

Answer 1

Flexbox align-items考虑了保证金，因此您可能希望删除bottom-margin: 10px;以使其完全垂直居中。