センターメッセージの整合化CSSフレームワーク

Question

ユーザーのユーザー通知メッセージを実装しようとしていますが、センターに配置できません。

<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がどのように見えるかです。私はまた、これにHTMLを変更しようとしました：

他のものも試してみましたか？どのようにこれを中心にしますか？

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>