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

<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).

htmlcssmaterializecard


Solution 1:[1]

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>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Oleg Valter is with Ukraine

Related Questions