CODEWITHSUNDEEP
cssflexbox
Keith Demeulenaere
Keith Demeulenaere

Reputation: 1

Flexbox align-items:center not perfect in the center

I'm having trouble with the flexbox tool align-items:center; is not perfect in the middle but a few pixels too high on the text, icons,... Someone knows how to solve this?

screenshot how it looks like

For example, this is the html/css code I use for the post item.

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

Upvotes: 0

Views: 1749

Answers (1)

Sebastijan Dumančić
Sebastijan Dumančić

Reputation: 1182

Flexbox align-items take margin into account, so you may want to remove bottom-margin: 10px; to have it perfectly vertically centered.

Upvotes: 1

Related Questions