Search code examples
csshtmlmaterializecenter-align

Cant center align stuff using materialize


I've been using MaterializeCSS, and I'm having some trouble to centralize stuff, I have the following snippet, and tried a lot of stuff, but I can't figure it out a way to centralize it because it always left aligns it

How do I do it?

@import 'https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.0/css/materialize.min.css';
      <div class="row">
        <div class="col s12 m5 profile-inner center-block">
          <img class="circle responsive-img perfil-icon" src="http://ddragon.leagueoflegends.com/cdn/6.24.1/img/profileicon/600.png">
          <br><span class="center-align"style="font-size: 2.5rem">TyG Yeux</span><br>
          
          <span style="font-size: 1.5rem">Level 50</span>
        </div>


Solution

  • Use center-align instead of center-block. center-block is suitable to used for centering image itself. But, currently you want to center from Parent container, by such need to use center-align to align all child to center

    @import 'https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.0/css/materialize.min.css';
    <div class="row">
            <div class="col s12 m5 profile-inner center-align">
              <img class="circle responsive-img perfil-icon" src="http://ddragon.leagueoflegends.com/cdn/6.24.1/img/profileicon/600.png">
              <br><span class="center-align"style="font-size: 2.5rem">TyG Yeux</span><br>
              
              <span style="font-size: 1.5rem">Level 50</span>
            </div>