Sibbs Gambling Sibbs Gambling - 4 months ago 17
CSS Question

Unicode symbol in table cell fails vertical-align of CSS?

Every time I have a unicode symbol in one table cell,

vertical-align: middle;


in my CSS stops working. As a result, the text "floats higher" than middle.

enter image description here

Notice how text in the upper row is vertically aligned in the middle, whereas
Sun Jun 4 23:52:31 2017
in the lower row floats higher than middle because of the folder unicode symbol.




Relevant part of CSS

table, td, th {
border: 2px solid #D0D0D0;
}

table {
border-collapse: collapse;
}

td {
vertical-align: bottom;
}


Relevant part of HTML

<td><a href="foo" style="text-decoration: none">&#x1f4c2;&emsp;viz_coreOpt_3D</a><span style="float:right;">&emsp;&emsp;Sun Jun 4 23:52:31 2017</span></td>

Answer Source

The folder icon is the reason that one line in height exceeds the other. I suggest to set the line height not less than the height of the icon.

table, td, th {
    border: 2px solid #D0D0D0;
}

table {
    border-collapse: collapse;
}

td {
  line-height: 1.5em;
    vertical-align: bottom;
}
<table>
  <tr>
    <td>
      <a href="foo" style="text-decoration: none">&#x1f4c2;&emsp;viz_coreOpt_3D</a>
      <span style="float:right;">&emsp;&emsp;Sun Jun 4 23:52:31 2017</span>
    </td>
  </tr>
</table>