對齊中心消息實現CSS框架

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>