html - CSS:使用 Materialize 框架在 Chrome 中截断 header

Question

我正在使用物化框架来构建网络应用。

我的网站在 Firefox 中看起来很棒，但在 Google chrome(PC/移动版)中，标题栏中的文本被截断了 50%，如下所示:

这是该图片片段的代码:

  <!-- Compiled and minified CSS -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/css/materialize.min.css">

<header>
<nav>
    <div class="nav-wrapper blue-grey darken-2">
        <div class="valign-wrapper">
            <a id="app_page_title" href="#" class="brand-logo center" style="font-weight: 200;">Dashboard</a>
        </div>
        <a href="#" data-activates="slide-out" class="button-collapse"><i class="material-icons">menu</i></a>
        <ul id="nav-mobile" class="right hide-on-med-and-down">
            <?php echo($admin_btn) ?>
            <?php echo($stats_btn) ?>
        </ul>
    </div>
</nav>
 </header>

运行代码片段以了解我的意思。

只是想知道如何正确定位它(垂直居中)，就像在 firefox 中一样。

谢谢!

Answer 1

您可以使用自己的 CSS，但您必须制定规则 !important 以使其适用于页眉。这将适用于所有浏览器。

请看下面的片段:

.brand-logo {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
}

<!-- Compiled and minified CSS -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/css/materialize.min.css">

<header>
<nav>
    <div class="nav-wrapper blue-grey darken-2">
        <div class="valign-wrapper">
            <a id="app_page_title" href="#" class="brand-logo center" style="font-weight: 200;">Dashboard</a>
        </div>
        <a href="#" data-activates="slide-out" class="button-collapse"><i class="material-icons">menu</i></a>
        <ul id="nav-mobile" class="right hide-on-med-and-down">
            <?php echo($admin_btn) ?>
            <?php echo($stats_btn) ?>
        </ul>
    </div>
</nav>
 </header>

希望这对您有所帮助!