將材質設計圖標上方的文字對齊（使用materializecss）

我目前使用materializecss框架並拉動圖標並將其放在文本旁邊。我需要將中間以上的文本對齊到以上的圖標與CSS，但我目前似乎沒有工作。將材質設計圖標上方的文字對齊（使用materializecss）

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

然而，文本仍停留於圖標的右側。

這是我最終試圖實現的結果。

來源

2016-02-28 Simon

是你需要什麼？ http://plnkr.co/edit/sUxq40VIxfr2Im3Uq2rm?p=preview – Microsmsm

更新：這裏有你所需要的^ _^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>

來源

2016-02-28 05:48:44 Microsmsm

謝謝@Microsmsm但是，這似乎並沒有與我目前的設置。我編輯了我的帖子，以包含圖標包裹的內容。問題是表頭「」與其他表標題等同。我無法硬編碼表頭的寬度和高度 – Simon

@Simon是你需要的嗎？ http://plnkr.co/edit/frPWZgeUajpDy1ZEuwdp?p=preview – Microsmsm

謝謝你，顯示的結果是的，但是當我把它放到''錶行並且有多個頭（如我的例子），它不起作用。 – Simon

將材質設計圖標上方的文字對齊（使用materializecss）

回答

相關問題