Is there a way to center a card in a container using Materialize CSS?

Question

<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

<body class="grey darken-4">
  <div class="container">
    <div class="row">
      <!-- I have tried adding center, center-align as a class to div tags but it in correctly formats. My form elements to the center which was not what I except -->
      <div class="col s12 m6 l10">
        <!-- adding center, center- align to the row still doesn't fix the issues still -->
        <div class="card">
          <div class="card-content">
            <span class="card-title center ">Loan Calculator</span>
            <form action="">
              <div class="input-group">
                <div class="input-field">
                  <span>$</span>
                  <input type="number" class="form-control" placeholder="Amount">

                </div>

                <div class="input-field">
                  <span>%</span>
                  <input type="number" class="ïnput-field" placeholder="Loan" class="form-control">

                </div>

                <div class="input-field">
                  <input type="number" class="form-control" placeholder="Years To Pay">
                </div>

                <div class="center">
                  <input type="submit" value="CALCULATE" class="btn black">
                </div>
                <h5 class="text-darken-3 center " id="result">Results</h5>


              </div>


            </form>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

I don't know if this is a current issue with Materialize CSS itself.

My goal is to properly format the card so that it has 6 columns for medium display. However, the card, when resized to small width, behaves in a erratic manner (the content is aligned to the left, and the space on the right is left empty).

score 2 · Answer 1 · answered May 07 '22 at 15:43

The cause of the "issue" (I would say it is by-design) is the combination of float: left; and margin-left: auto; with no margin-right: auto; rules applied for columns with .col.m* classes. Because of this, columns are always snapped to the left of the containing row.

If you want to override this to center your column, you need to specify an offset. What Materialize CSS Grid (implemented with float) expects you to do is to express that the column taking ½ of the containing row width should be offset by 6 divided by 2 columns on both sides (aka "centered").

Offsets in Materialize CSS are provided with the offset-* set of classes. In your case, you only need the offset-m* and offset-l* subsets. Let's take a look:

<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

<body class="grey darken-4">
  <div class="container">
    <div class="row">
      <!-- I have tried adding center, center-align as a class to div tags but it in correctly formats. My form elements to the center which was not what I except -->
      <div class="col s12 m6 l10 offset-m3 offset-l2">
        <!-- adding center, center- align to the row still doesn't fix the issues still -->
        <div class="card">
          <div class="card-content">
            <span class="card-title center ">Loan Calculator</span>
            <form action="">
              <div class="input-group">
                <div class="input-field">
                  <span>$</span>
                  <input type="number" class="form-control" placeholder="Amount">

                </div>

                <div class="input-field">
                  <span>%</span>
                  <input type="number" class="ïnput-field" placeholder="Loan" class="form-control">

                </div>

                <div class="input-field">
                  <input type="number" class="form-control" placeholder="Years To Pay">
                </div>

                <div class="center">
                  <input type="submit" value="CALCULATE" class="btn black">
                </div>
                <h5 class="text-darken-3 center " id="result">Results</h5>


              </div>


            </form>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

Thanks for the feedback, it does work but what I don't understand is that the offset-l2 shifts the content by two columns to the right of the already left-centetered div. Without also affecting the left? — geek, May 07 '22 at 16:01
@geek oh, it's pretty simple: `offset-*` classes add `margin-left` of a certain percentage. Since Materialize's grid is not really a Grid but an old `flex` implementation, they simply push the floated column to the right. — Oleg Valter is with Ukraine, May 07 '22 at 16:07

Is there a way to center a card in a container using Materialize CSS?

1 Answers1