How to horizontally align column in Materialize CSS?

Question

I am just confused about how we can horizonally center align a column in materialize! I tried using offset-m but it didn't center though.

Please help!

<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css" type="text/css" rel="stylesheet">
<div class="row">
  <h3 class="center-align">Welcome</h3>
  <form class="col s12 center-align">
    <!--I want to horizontally align these input fields-->
    <div class="row">
      <div class="col s3">
        <input type="text" id="first_name" placeholder="First Name" name="first_name">
      </div>
    </div>
    <div class="row">
      <div class="col s3">
        <input type="text" id="last_name" name="last_name">
      </div>
    </div>
    <div class="row">
      <div class="col s3">
        <input type="email" id="email" name="email">
      </div>
    </div>
    <div class="row">
      <div class="col s3">
        <input type="password" id="password" name="password">
      </div>
    </div>
    <div class="row">
      <div class="col s3">
        <input type="submit" class="btn">
      </div>
    </div>
  </form>
</div>

I want to horizontally center align these input fields!!!

Answer 1

To use offset you have to set the width of the column to a certain value then the rest of the row width 12 - column width should be divided by 2 so in your case if column width is 3 so the rest of the width is 9 columns which should be 4.5 before column and 4.5 after it which we can't reach with materialize columns but we could reach it when column width is 4 so we have offset-4 to achieve the alignment

<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css" type="text/css" rel="stylesheet">
<div class="row">
  <h3 class="center-align">Welcome</h3>
  <form class="col s12 center-align">
    <!--I want to horizontally align these input fields-->
    <div class="row">
      <div class="col s4 offset-s4">
        <input type="text" id="first_name" placeholder="First Name" name="first_name">
      </div>
    </div>
    <div class="row">
      <div class="col s4 offset-s4">
        <input type="text" id="last_name" name="last_name">
      </div>
    </div>
    <div class="row">
      <div class="col  s4 offset-s4">
        <input type="email" id="email" name="email">
      </div>
    </div>
    <div class="row">
      <div class="col  s4 offset-s4">
        <input type="password" id="password" name="password">
      </div>
    </div>
    <div class="row">
      <div class="col  s4 offset-s4">
        <input type="submit" class="btn">
      </div>
    </div>
  </form>
</div>

Note: I don't understand why you are using row for just one column ! you can reach the same result without grid.

Answer 2

add this style to your page,

.row .col{
  float: none !important;
  margin-left: auto;
  margin-right: auto;
}

.row .col{
  float: none !important;
  margin-left: auto;
  margin-right: auto;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css" type="text/css" rel="stylesheet">
<div class="row">
  <h3 class="center-align">Welcome</h3>
  <form class="col s12 center-align">
    <!--I want to horizontally align these input fields-->
    <div class="row">
      <div class="col s3">
        <input type="text" id="first_name" placeholder="First Name" name="first_name">
      </div>
    </div>
    <div class="row">
      <div class="col s3">
        <input type="text" id="last_name" name="last_name">
      </div>
    </div>
    <div class="row">
      <div class="col s3">
        <input type="email" id="email" name="email">
      </div>
    </div>
    <div class="row">
      <div class="col s3">
        <input type="password" id="password" name="password">
      </div>
    </div>
    <div class="row">
      <div class="col s3">
        <input type="submit" class="btn">
      </div>
    </div>
  </form>
</div>