How to center text inputs using Materialize CSS?

问题

I am trying to center an input text using Materialize CSS but the "center" and "center-align" classes seem to have no effect. I cannot figure out what am I missing here

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

回答1:

.center-align only applies text-align: center; which has no effect on floating elements.

Use their 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>

To make it responsive, you can play with different offsets for different widths:

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

来源：https://stackoverflow.com/questions/54728464/how-to-center-text-inputs-using-materialize-css

标签

css

material-design