Материализуйте центральные кнопки Горизонтально на сетке

Question

Я работаю над https://rapptor.co. Я использовал Materialize в качестве рамки, и я создаю модем для входа в систему, я пытаюсь центрировать кнопки в нижней части модального с выравниванием по центру, однако это не работает.

<!-- Modal Structure --> 
<div id="modal1" class="modal"> 
    <div class="modal-content"> 
     <h4>Login Details</h4> 

     <div class="row"> 
      <div class="input-field col s12"> 
       <i class="material-icons prefix">person</i> 
       <input id="first_name" type="text" class="validate"> 
       <label for="first_name">Username/Email</label> 
      </div> 
      <div class="input-field col s12"> 
       <i class="material-icons prefix">security</i> 
       <input id="first_name" type="password" class="validate"> 
       <label for="first_name">Password</label> 
      </div> 
     </div> 
    </div> 
    <div class="modal-footer"> 
     <div class="row" style="margin-bottom: -30px;"> 
      <div class="col m4 s12"> 
       <a href="#!" class="modal-action modal-close waves-effect waves-red btn-flat red lighten3">Close</a> 
      </div> 
      <div class="col m4 s12"> 
       <a href="#!" class="modal-action waves-effect waves-orange btn-flat orange lighten-3">Help</a> 
      </div> 
      <div class="col m4 s12"> 
       <a href="#!" class="modal-action waves-effect waves-green btn-flat green lighten-3">Login</a> 
      </div> 
     </div>   
    </div> 
</div> 

Может ли кто-нибудь предложить что-нибудь для меня попробовать?

Спасибо!

Answer 1

удалить float:right; и вставить попробовать следующие CSS в строке нет: 13

.row .col.m4 { 
    width: 33.3333333333%; 
    margin-left: auto; 
    left: auto; 
    right: auto; 
    text-align: center; 
} 

Answer 2

изменения ваш модальный сноска как этот путь, просто запустите этот фрагмент кода вы можете увидеть разницу, надеюсь, это поможет вам

.modal-footer { 
 
\t text-align:center; 
 
} 
 
.modal-footer a { 
 
\t display:inline-block; 
 
\t margin:0 15px; 
 
\t float:none; /*if you set float already */ 
 
}

<div class="modal-footer"> 
 
    <a href="#!" class="modal-action modal-close waves-effect waves-red btn-flat red lighten3">Close</a> 
 
    <a href="#!" class="modal-action waves-effect waves-orange btn-flat orange lighten-3">Help</a> 
 
    <a href="#!" class="modal-action waves-effect waves-green btn-flat green lighten-3">Login</a> 
 
</div>

если вы установите эту кнопку вам показать, как эта картина

я не знаю, это то, что вам нужно, вот почему я положил изображение здесь