垂直对齐 td 中可变高度的字体真棒图标
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;
}
看来您只需将 vertical-align: middle
添加到 .time
元素即可。这样做时,同级 .fa-tags
元素将垂直居中。
.time {
display: inline-block;
vertical-align: middle;
font-size: 13px;
color: #d91e17;
}
我需要在 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;
}
看来您只需将 vertical-align: middle
添加到 .time
元素即可。这样做时,同级 .fa-tags
元素将垂直居中。
.time {
display: inline-block;
vertical-align: middle;
font-size: 13px;
color: #d91e17;
}