物化ECSS-图标和字体不对齐

我从BS4转到了Material，并且一直在使用Material图标，但我在对齐方面一直存在问题。

有时这是一个明显的变化-例如面包屑，有时它很小，如按钮的情况

我有非常少的CSS是非物质的，它不应该修改字体

我应用于面包屑以使其对齐的CSS具有以下效果：

.breadcrumb-nav
  height: 35px
  line-height: 35px
  padding-left: 150px

.breadcrumb_current
  border-bottom: 3px solid $divider-color

它工作得很漂亮，但是我现在必须将CSS应用到每个材质图标，或者有图形的元素。这是一个已知的问题，还是我遗漏了什么

小提琴：

我的面包屑问题是理解力差：

<div class="breadcrumb-nav">
    <div class="nav-wrapper">
        <div class="col s12">
            <a class="breadcrumb">
                <%= link_to 'Home', root_path %>
            </a>
            <a class="breadcrumb ">
                <a class="breadcrumb_current">Statements Overview</a>
            </a>
        </div>
    </div>
</div>

声明概述

应该是

<div class="breadcrumb-nav">
    <div class="nav-wrapper">
        <div class="col s12">
                <%= link_to 'Home', root_path, :class => "breadcrumb" %>
                <a class="breadcrumb">Statements Overview</a>
            </a>
        </div>
    </div>
</div>

“面包屑”%>
声明概述

使用此CSS

CSS

---

图标的标记应如下所示：

<i class="material-icons left">add</i>

添加

---

如果没有

left

类，您的图标将看起来不清晰。

您可以将图标边距顶部更改为负值或任何值以对齐它。 比如说,

<i class="material-icons" style="margin-top:-10px">android</i>

android

你能帮我做一个fiddle@ChandraShekhar附着。使用“垂直对齐：中间”作为材质-icons@jaseelmp但是，在什么因素上？标签元素的

，包含

文本

，请确保按钮中存在此问题。面包屑的情况如何？你应该在上面加上“左”字吗？我不这么认为。文档不会将图标放在标记中，而是通过CSS

content

property显示。看看你的标记是否正确：@DNorthrup用面包屑的标记更新帖子。您可能在某个地方干扰了MaterializeCSS。是的。。。。没错。我和breadcrumb类讨论了实际链接。谢谢。

<i class="material-icons" style="margin-top:-10px">android</i>