Как центрировать текстовые вводы с использованием Materialise CSS?

Question

Я пытаюсь центрировать входной текст, используя Materialize CSS, но классы "center" и "align-center", кажется, не имеют никакого эффекта.Я не могу понять, что мне здесь не хватает

<div class="section">
<div class="row center-align">
    <div class="input-field col s3 center-align">
        <input id="email" type="email" class="validate">
        <label for="email">Email</label>
    </div> 
</div>      
<div class="row">
        <div class="input-field col s3 center-align">
            <input id="password" type="password" class="validate">
            <label for="password">Password</label>
        </div>
</div>
</div>

Answer 1

.center-align применяется только text-align: center;, который не влияет на плавающие элементы.

Используйте их классы сетки : col s4 offset-s4:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

<div class="section">
  <div class="row">
    <div class="input-field col offset-s4 s4">
      <input id="email" type="email" class="validate">
      <label for="email">Email</label>
    </div>
  </div>
  <div class="row">
    <div class="input-field col offset-s4 s4">
      <input id="password" type="password" class="validate">
      <label for="password">Password</label>
    </div>
  </div>
</div>

Чтобы сделать его отзывчивым, вы можете играть с разными смещениями для различной ширины:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

<div class="section">
  <div class="row">
    <div class="input-field col offset-l5 l2 offset-m4 m4 offset-s3 s6">
      <input id="email" type="email" class="validate">
      <label for="email">Email</label>
    </div>
  </div>
  <div class="row">
    <div class="input-field col offset-l5 l2 offset-m4 m4 offset-s3 s6">
      <input id="password" type="password" class="validate">
      <label for="password">Password</label>
    </div>
  </div>
</div>