整列ボタンをマテリアライズCSSのアイコンに合わせるにはどうすればいいですか？

Question

私はこのログインフォームを持っていますが、私はボタンを中央に揃えたいと思いますが、完全にそろえることはできません。それを整列させる最も良い方法は何ですか？

<form class="col s12"> 
    <div class="row"> 
     <div class="input-field col s10 offset-s1"> 
      <input id="last_name" type="text" class="validate"> 
      <label for="last_name">Username</label> 
     </div> 
    </div> 
    <div class="row"> 
     <div class="input-field col s10 offset-s1"> 
      <input id="password" type="password" class="validate"> 
      <label for="password">Password</label> 
     </div> 
    </div> 
    <div class="row"> 
     <div class="col s6 offset-s4"> 
      <button class="btn waves-effect waves-light" type="submit" name="action"> 
       Submit 
       <i class="material-icons right">send</i> 
      </button> 
     </div> 
    </div> 
</form> 

助けてください。ありがとうございました！

Answer 1

ボタンコンテナに属性text-align: center;を追加してみます。

これを行うには、クラスを追加して、以下のコードにcssを含めてください。

<style> 
    .center-text { 
     text-align: center; 
    } 
</style> 

<form class="col s12"> 
    <div class="row"> 
     <div class="input-field col s10 offset-s1"> 
      <input id="last_name" type="text" class="validate"> 
      <label for="last_name">Username</label> 
     </div> 
    </div> 
    <div class="row"> 
     <div class="input-field col s10 offset-s1"> 
      <input id="password" type="password" class="validate"> 
      <label for="password">Password</label> 
     </div> 
    </div> 
    <div class="row"> 
     <div class="col s6 offset-s4 center-text"> 
      <button class="btn waves-effect waves-light" type="submit" name="action"> 
       Submit 
       <i class="material-icons right">send</i> 
      </button> 
     </div> 
    </div> 
</form> 

Answer 2

あなたdivは、ボタンを含むフォームの入力と同じ幅を行い、その後、単にそのようcenter-alignクラスを追加：あなたがしたいことを、タグに

<form class="col s12"> 
    <div class="row"> 
     <div class="input-field col s10 offset-s1"> 
      <input id="last_name" type="text" class="validate"> 
      <label for="last_name">Username</label> 
     </div> 
    </div> 
    <div class="row"> 
     <div class="input-field col s10 offset-s1"> 
      <input id="password" type="password" class="validate"> 
      <label for="password">Password</label> 
     </div> 
    </div> 
    <div class="row"> 
     <!-- CHANGED THE DIV BELOW (Changed size to col s10 offset-s1 
     to match the divs above and added center-align --> 
     <div class="col s10 offset-s1 center-align"> 
      <button class="btn waves-effect waves-light" type="submit" name="action"> 
       Submit 
       <i class="material-icons right">send</i> 
      </button> 
     </div> 
    </div> 
</form>