[英]vertically align font awesome icon in td with variable height
我需要在td
中间垂直对齐一个字体很棒的图标。 此td
可以包含单行或双行文本,因此它具有可变高度。 我只是无法弄清楚如何对齐它。 我尝试了从line-height
到vertical-align
到display: inline-table
。 没有任何效果。 也许你有个主意。
我在谈论fa-tags
图标。 这是我的代码:
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="Vertrag runterladen">Vertrag <span class="fa fa-fw fa-download"></span></a>
</td>
<td class="invoice">
<a href="#" title="Rechnungen runterladen">Rechnungen <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="Vertrag runterladen">Vertrag <span class="fa fa-fw fa-download"></span></a>
</td>
<td class="invoice">
<a href="#" title="Rechnungen runterladen">Rechnungen <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;
}
看起来你只需要在.time
元素vertical-align: middle
添加vertical-align: middle
。 这样,兄弟.fa-tags
元素将垂直居中。
.time {
display: inline-block;
vertical-align: middle;
font-size: 13px;
color: #d91e17;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.