Gandalf StormCrow Gandalf StormCrow - 2 months ago 32
HTML Question

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>


Tried couple of other things too it doesn't work? How would you center this?

Answer

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>

Comments