css - 不能使用物化中心对齐东西

Question

我一直在使用MaterializeCSS，我在集中一些东西时遇到了一些麻烦，我有以下代码片段，并尝试了很多东西，但我无法找到一种集中它的方法，因为它总是左对齐

我该怎么做？

@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>

Answer 1

使用center-align而不是center-block. center-block适合用于图像本身的居中。但是，目前您想从父容器居中，因此需要使用 center-align 将所有子容器对齐到中心

@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>