Jquery 当移动页面宽度增加时，物化图标向上移动

我有一个手机网站，看起来像这样：

<div class="navbar-fixed ">

        <nav class="orange " role="navigation">
            <div class="nav-wrapper container"><a id="logo-container" href="#" class="brand-logo">Beer Portfolio</a>



                <ul class="right hide-on-med-and-down left">
                    <li><a href="#">Navbar Link</a></li>
                </ul>

                <ul id="nav-mobile" class="side-nav left">
                    <li><a href="#">Navbar Link</a></li>
                </ul>


                <a href="#" data-activates="nav-mobile" class="button-collapse"><i class="material-icons">menu</i></a>

                <ul class="right ">
                    <li><a href="sass.html"><i class="material-icons">search</i></a></li>

                </ul>
            </div>
        </nav>


    </div>

正如您所看到的，搜索图标是垂直对齐的。但当我缩小页面宽度时（在手机上查看），搜索图标会跳起来：

我的代码如下所示：

<div class="navbar-fixed ">

        <nav class="orange " role="navigation">
            <div class="nav-wrapper container"><a id="logo-container" href="#" class="brand-logo">Beer Portfolio</a>



                <ul class="right hide-on-med-and-down left">
                    <li><a href="#">Navbar Link</a></li>
                </ul>

                <ul id="nav-mobile" class="side-nav left">
                    <li><a href="#">Navbar Link</a></li>
                </ul>


                <a href="#" data-activates="nav-mobile" class="button-collapse"><i class="material-icons">menu</i></a>

                <ul class="right ">
                    <li><a href="sass.html"><i class="material-icons">search</i></a></li>

                </ul>
            </div>
        </nav>


    </div>

奇怪的是，我可以使用垂直对齐，它将修复它，但它会将图标移到左侧

只需将valign wraper添加到此行：

    <div class="nav-wrapper container valign-wrapper"><a id="logo-container" href="#" class="brand-logo">Beer Portfolio</a>

修复了我的问题，但将图标移动如下：

<div class="navbar-fixed ">

        <nav class="orange " role="navigation">
            <div class="nav-wrapper container"><a id="logo-container" href="#" class="brand-logo">Beer Portfolio</a>



                <ul class="right hide-on-med-and-down left">
                    <li><a href="#">Navbar Link</a></li>
                </ul>

                <ul id="nav-mobile" class="side-nav left">
                    <li><a href="#">Navbar Link</a></li>
                </ul>


                <a href="#" data-activates="nav-mobile" class="button-collapse"><i class="material-icons">menu</i></a>

                <ul class="right ">
                    <li><a href="sass.html"><i class="material-icons">search</i></a></li>

                </ul>
            </div>
        </nav>


    </div>

---

我无法保持座椅垂直对齐并向右……

如果您将此CSS添加到样式表中，它将解决您的问题：

@media only screen and (max-width : 601px) {
    nav, nav .nav-wrapper i, nav a.button-collapse, nav a.button-collapse i {
        height: 64px;
        line-height: 64px;
    }
}

下面是一个演示此解决方案的示例。要查看问题，请删除Fiddle中的css，运行它，然后调整框架窗口的大小

问题在于materialize.css具有以下样式：

@media only screen and (min-width : 601px) {
    nav, nav .nav-wrapper i, nav a.button-collapse, nav a.button-collapse i {
        height: 64px;
        line-height: 64px;
    }
}

它只有一个

minwidth:601px

的样式，因此当你低于该像素范围时，它将丢失保持中心所需的样式

---

我不确定这是否是他们的框架css中的错误，或者您是否缺少移动css文件、mixin、import或其他内容。

您可以发布导航的相关css吗？@zgood这是css，您提供的HTML和css看起来很可靠（）。你的

材质图标是如何加载的？当我在小提琴上看到图标移动时，你知道图标发生了什么吗。。。
搜索
的样式为
高度：64px和
行高：64px和其中的文本“搜索”，它垂直居中，不在调整大小时移动。我看不到实际的搜索图标，因为链接的CSS中没有
材质图标的样式。是否缺少图标css或javascript图标加载或某种图标框架？