Search code examples
htmlcssmaterialize

Align center message materialize css framework

I'm trying to implement user notification messages for users but I'm unable to center it. This is how my HTML look like :

<div class="row">
      <div class="col s12 m4">
        <div id="card-alert" class="card green lighten-5">
          <div class="card-content green-text">
            <p>Successfully added a product!</p>
          </div>
          <button type="button" class="close green-text" data-dismiss="alert" aria-label="Close">
            <span aria-hidden="true">×</span>
          </button>
        </div>
      </div>
    </div>

enter image description here

But I'm unable to center the card in the middle of the row. I tried also changing HTML to this :

<div class="card-content green-text valign center-block">
  <p>Successfully added a product!</p>
</div>

I tried a couple of other things too, but it doesn't work. How would you center this?

Solution

  • Add class center if you just wants horizontal alignment.

    <div class="card-content green-text center">


    @import url('https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/css/materialize.min.css');
    <div class="row">
  <div class="col s12">
    <div id="card-alert" class="card green lighten-5">
      <div class="card-content green-text center">
        <p>Successfully added a product!</p>
      </div>
      <button type="button" class="close green-text" data-dismiss="alert" aria-label="Close">
        <span aria-hidden="true">×</span>
      </button>
    </div>
  </div>
</div>

    And add the following classes for both horizontal and vertical alignment.

    <div class="card-content green-text center valign-wrapper">
<p class="valign">Successfully added a product!</p>

    With following styles:

    .valign-wrapper {
  height: 200px;
}

.valign {
  width: 100%;
}


    @import url('https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/css/materialize.min.css');

.valign-wrapper {
  height: 200px;
}

.valign {
  width: 100%;
}
    <div class="row">
  <div class="col s12">
    <div id="card-alert" class="card green lighten-5">
      <div class="card-content green-text center valign-wrapper">
        <p class="valign">Successfully added a product!</p>
      </div>
      <button type="button" class="close green-text" data-dismiss="alert" aria-label="Close">
        <span aria-hidden="true">×</span>
      </button>
    </div>
  </div>
</div>