CSS: Отрезанный заголовок в Chrome с использованием среды Materialize

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>

Надеется, что это помогает!