MaterialiseCSS - 图标和字体未对齐

Question

我从BS4搬到了Material，并且一直在使用Material Icons，但我在对齐时遇到了一致的问题。

有时候这是一个明显的变化 - 比如面包屑，有时它就像按钮一样小。

我有非常小的CSS非材质，并且没有一个应该修改字体。

我应用于Breadcrumb以使其对齐的CSS是以下效果：

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

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

哪种方法很漂亮，但我必须将CSS应用于每个材质图标或当前具有图形的元素。这是一个已知问题，还是我错过了什么？

小提琴：http://jsfiddle.net/awjxfwne/2/

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

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

Answer 1

图标的标记应如下所示：

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

如果没有left课程，您的图标就会显示出来。

Answer 2

使用此CSS

CSS

.s12 .btn .material-icons{
  vertical-align:middle;
}

Answer 3

您可以将图标的页边距顶部更改为负值或任何值以使其对齐。 例如，

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