如何使用Materialize 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;，这对浮动元素无效。

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