css - 如何使用 Materialise CSS 将文本输入居中？

Question

我正在尝试使用 Materialize CSS 将输入文本居中，但“center”和“center-align”类似乎没有效果。我不知道我在这里错过了什么

<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; 对 float 元素没有影响。

使用他们的 grid classes : 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>