移动页面宽度时，Materialize Icon向上移动

Question

我有一个移动网站，如下所示：

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

我的代码如下所示：

w: 0

奇怪的部分是我可以使用垂直对齐，它会修复它，但它会将Icon移动到左边....

只需将valign-wraper添加到此行：

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

修复了我的问题，但移动了这样的图标：

我不能让seaerch垂直对齐并且向右......

Answer 1

如果您将此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;
    }
}

它只有min-width : 601px的风格，所以当你低于那个像素范围时，它会失去保持中心所需的风格。

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