0

I'm currently using a built-in navigation layout of Material Design Lite. I'm giving the description link so that you can understand: https://getmdl.io/components/index.html#layout-section. I'm trying to make center-aligned title of mdl side drawer menu. But it's not working properly. I tried hard to fix it, but didn't find any solution: At first, I'm providing a screenshot of my work: enter image description here

The html code:

<div class="mdl-layout__drawer">
    <span class="mdl-layout-title"><a href="{{ url('/') }}">iPortal</a></span>
    <nav class="mdl-navigation">
      <a class="mdl-navigation__link" href="">Link</a>
      <a class="mdl-navigation__link" href="">Link</a>
      <a class="mdl-navigation__link" href="">Link</a>
      <a class="mdl-navigation__link" href="">Link</a>
    </nav>
</div>

Customized CSS:

.mdl-layout__drawer .mdl-layout-title{
    text-align: center;
}

Any help appreciated.

wp78de
  • 18,207
  • 7
  • 43
  • 71
S M Iftakhairul
  • 1,120
  • 2
  • 19
  • 42

1 Answers1

0

The following code should work properly

.mdl-layout__drawer .mdl-layout-title{
    padding: 0;
    text-align: center;
}