Выровнять центральное сообщение материализовать css framework

Question

Я пытаюсь реализовать пользовательские уведомления для пользователей, но я не могу его центрировать. Это как мой HTML выглядит следующим образом:

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

Но я м не смог центрировать карту в середине ряда. Я также пытался сменить HTML-код на это:

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

Пробовал пару других вещей тоже не работает? Как бы вы сосредоточили это?

Answer 1

Добавить класс center если вы просто хотите горизонтальное выравнивание.

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

И добавьте следующие классы для горизонтального и вертикального выравнивания.

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

со следующими стилями:

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

Answer 2

Попробуйте это!

#card-alert > div { 
    margin: auto; 
    width: 100px; 
} 

#card-alert > div { 
 
    margin: auto; 
 
    width: 100px; 
 
}

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