Misalignment between text and icon in a table cell

Question

I have a table cell with a text and icon:

.icon {
  float: right;
  margin-right: 5px;
}

<td class="table_cell">
  <span>
    Some text
    <i class="icon"></i>
  </span>
</td>

Chrome displays them vertically aligned to each other, Firefox display the text on the upper left and icon lower right corner.

How can I fix that, thanks!!

@VadimOvchinnikov I think Theano is more concerned about the inconsistency of appearance in different browsers. — tim1234, Jul 24 '17 at 09:42
@Tim1234 I'd say it's not clear from post content. Maybe author is interested in just solving the issue regardless of reasons for different browser behaviour. — Vadim Ovchinnikov, Jul 24 '17 at 09:45
Yes, i want some text and icon vertically centered. The issue appears only on Firefox — Theano T, Jul 24 '17 at 10:25

score 0 · Accepted Answer · answered Jul 24 '17 at 09:44

0

You can use flexbox to provide your table cell content vertical centering. Demo:

.table_cell > span {
  /* become a flex-container */
  /* all children will be flex-items including plain text */
  display: flex;
  /* vertically center items */
  align-items: center;
}

.icon {
  /* move icon to the right */
  margin-left: auto;
  margin-right: 5px;
]

<td class="table_cell">
  <span>
    Some text
    <i class="icon"></i>
  </span>
</td>

answered Jul 24 '17 at 09:44

Vadim Ovchinnikov

13,327
5
62
90

@TheanoT Glad to hear this! Can you accept my answer (using green check to the left) if it helped you? – Vadim Ovchinnikov Jul 24 '17 at 10:28

Misalignment between text and icon in a table cell

1 Answers1