How can I vertically align a font-awesome icon in the center of a td? The td may have varying heights due to its content, which could be one or two lines of text. I've tried adjusting the line-height, using vertical-align, and even applying display: inline-table, but nothing seems to work. Any suggestions would be greatly appreciated.
I'm specifically referring to the fa-tags icon within my code:
HTML:
<table>
<tbody class="row">
<tr class="data">
<td class="date">
<span class="fa fa-tags"></span>
<div class="time">
<time datetime="2015-04-21">21.04.2015</time> -<br>
<time datetime="2015-04-24">24.04.2015</time>
</div>
</td>
<td class="hotel-data">
Hilton Barcelona
<span class="stars">
<span class="fa fa-star"></span>
<span class="fa fa-star"></span>
<span class="fa fa-star"></span>
<span class="fa fa-star"></span>
</span>
</td>
<td class="contract">
<a href="#" title="Download Contract">Contract <span class="fa fa-fw fa-download"></span></a>
</td>
<td class="invoice">
<a href="#" title="Download Invoices">Invoices <span class="fa fa-fw fa-download"></span></a>
</td>
<td class="details">
<a href="" title="">Details <span class="fa fa-chevron-right fa-fw"></span></a>
</td>
</tr>
<tr class="data">
<td class="date">
<span class="fa fa-tags"></span>
<div class="time">
<time datetime="2015-04-21">21.04.2015</time>
</div>
</td>
<td class="hotel-data">
Best Western Alfa Aeropuarto Barcelona
<span class="stars">
<span class="fa fa-star"></span>
<span class="fa fa-star"></span>
<span class="fa fa-star"></span>
<span class="fa fa-star"></span>
</span>
</td>
<td class="contract">
<a href="#" title="Download Contract">Contract <span class="fa fa-fw fa-download"></span></a>
</td>
<td class="invoice">
<a href="#" title="Download Invoices">Invoices <span class="fa fa-fw fa-download"></span></a>
</td>
<td class="details">
<a href="" title="">Details <span class="fa fa-chevron-right fa-fw"></span></a>
</td>
</tr>
</tbody>
</table>
CSS:
td {
padding: 7px 15px;
vertical-align: middle;
min-height: 57px;
}
.date .fa {
color: #999;
font-size: 18px;
margin-right: 5px;
}
.time {
display: inline-block;
font-size: 13px;
color: #d91e17;
}