Question

我目前正在使用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;
}

但是，文字仍然位于图标右侧。

这是我最终想要实现的结果。

Answer 1

已更新：此处您需要的内容^ _ ^ DEMO

＆＃13;

<!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>

＆＃13;

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

1 个答案: