在材料设计图标上方对齐文本（使用materializecss）答案

【问题标题】：Align text above material design icon (using materializecss)在材料设计图标上方对齐文本（使用materializecss）
【发布时间】：2016-06-11 06:20:48
【问题描述】：

我目前正在使用materializecss 框架并拉入一个图标并将其放在文本旁边。我需要将图标中间上方中的文本与css对齐，但我目前拥有的似乎不起作用。

<table class="centered">
    <thead>
        <th class="align-text"><i class="material-icons small">timer</i>Time</th>
        <th>Another header</th>
        <th>And another header</th>
    </thead>
</table>

我现在的css 文件：

.align-text {
     display: inline-block;
     text-align: center;
     vertical-align: top;
}

但是，文本仍然停留在图标的右侧。

这是我最终想要达到的结果。

【问题讨论】：

这是你需要的吗？ plnkr.co/edit/sUxq40VIxfr2Im3Uq2rm?p=preview

标签： html css material-design materialize

【解决方案1】：

更新：这是你需要的 ^_^ DEMO

<!DOCTYPE html>
<html>

<head>
  <!--Import Google Icon Font-->
  <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <!--Import materialize.css-->
  <link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection" />
  <style>
    th {
      display: inline-block;
    }
    .align-text {
      display: inline-block;
      text-align: center;
      vertical-align: top;
    }
    span {
      display: block;
    }
  </style>
  <!--Let browser know website is optimized for mobile-->
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>

<body>

  <table class="centered">
    <thead>
      <th class="align-text"><span>Time</span><i class="material-icons small">timer</i>
      </th>
      <th class="align-text"><span>Time</span><i class="material-icons small">timer</i>
      </th>
      <th class="align-text"><span>Time</span><i class="material-icons small">timer</i>
      </th>
    </thead>
  </table>

  <!--Import jQuery before materialize.js-->
  <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
  <script type="text/javascript" src="js/materialize.min.js"></script>
</body>

</html>

【讨论】：

谢谢@Microsmsm 但是，这似乎不适用于我当前的设置。我已经编辑了我的帖子以包含图标所包含的内容。问题是表格标题<th> 与其他表格标题同样间隔开。我无法硬编码表格标题的宽度和高度
@Simon 是你需要的吗？ plnkr.co/edit/frPWZgeUajpDy1ZEuwdp?p=preview
谢谢你显示结果是的，但是当我把它放到<tr> 表格行并且有多个标题（如我的例子中）它不起作用。
它对我有用！您能否编辑您的问题并提供一些屏幕截图和更多代码，以便我们可以帮助@Simon？
我已编辑图片以显示所需内容。基本上有 3 个表格标题，图标上方有文字。在您向我展示的提供的代码中，我在<thead> 中添加<tr>，然后复制<th> 以模拟另一个标题。它们堆叠在顶部而不是内联另一列