How to center align button with an icon for materialize css? - materialize

Question

I have this login form and I want to center align the button but I can't seem to align it perfectly. What's the best way to center align it?
<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>
Please help. Thank you!

Answer 1

Make your div containing the button the same width as your form inputs and then simply add the center-align class like so:
<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>

Answer 2

Try to add the attribute text-align: center; to the button container.
To do so I've added a class and included the css in the code below.
<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>