垂直对齐 td 中具有可变高度的字体真棒图标

Posted

技术标签:

【中文标题】垂直对齐 td 中具有可变高度的字体真棒图标【英文标题】:vertically align font awesome icon in td with variable height 【发布时间】:2015-05-04 12:52:36 【问题描述】:

我需要在td 中间垂直对齐一个字体很棒的图标。这个td 可以包含单行或双行文本,因此它具有可变高度。我只是不知道如何对齐它。我尝试了从line-heightvertical-aligndisplay: 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 中具有可变高度的字体真棒图标的主要内容,如果未能解决你的问题,请参考以下文章

如何使用大字体真棒图标垂直居中文本?

如何将文本与图标字体垂直对齐?

垂直对齐引导行中的跨度

按钮中文本和图标的垂直对齐

HTML5/CSS 根据其他列相互高度对齐列表项

垂直对齐 td 中 contenteditable div 中的文本,其中 div 与 td 大小相同