垂直对齐 td 中具有可变高度的字体真棒图标
Posted
技术标签:
【中文标题】垂直对齐 td 中具有可变高度的字体真棒图标【英文标题】:vertically align font awesome icon in td with variable height 【发布时间】:2015-05-04 12:52:36 【问题描述】:我需要在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;
EXAMPLE BOOTPLY
【问题讨论】:
【参考方案1】:看起来您只需将vertical-align: middle
添加到.time
元素。这样做时,兄弟.fa-tags
元素将垂直居中。
Updated Example
.time
display: inline-block;
vertical-align: middle;
font-size: 13px;
color: #d91e17;
【讨论】:
啊啊啊啊!我以为我什么都试过了。非常感谢!!我认为是时候收工了.. ;)以上是关于垂直对齐 td 中具有可变高度的字体真棒图标的主要内容,如果未能解决你的问题,请参考以下文章