S M Iftakhairul
S M Iftakhairul

Reputation: 1150

Center text align of 'MDL - Side Drawer Menu' not working properly.(getmdl.io)

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.

Upvotes: 0

Views: 1225

Answers (1)

user7666625
user7666625

Reputation:

The following code should work properly

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

Upvotes: 0

Related Questions