CODEWITHSUNDEEP
htmlcssmaterial-designmaterialize
Simon
Simon

Reputation: 6523

Align text above material design icon (using materializecss)

I am currently using the materializecss framework and pulling in an icon and putting it beside a text. I need to align the text in the middle above the icon with css but what I currently have does not seem to be working.

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

my css file at the moment:

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

However, the text still stays to the right of icon.

This is the result that I am ultimately trying to achieve.

enter image description here

Upvotes: 0

Views: 1056

Answers (1)

solimanware
solimanware

Reputation: 3051

Updated: Here's what you need ^_^ 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>

Upvotes: 0

Related Questions