时间戳

首页 > 解决方案 > 将文本放在绝对定位 div 的中心

html - 将文本放在绝对定位 div 的中心

问题描述

在下面的 html 片段中，我尝试将文本放置在绝对位置的中心divclass featured-price。span但是类里面的文本在centerddiv 中是不可见的。我正在使用 **materialize css ** 框架进行开发。

.review-star{
  color: #20BF55;
}
.featured-price{
  display: table;
  bottom: 15px;
  left: 0;
  padding: 3px 10px 2px 10px;
  font-size: 16px;
  height: 180px;
  position: absolute;
  background-color: #FF5964;
  -webkit-clip-path: polygon(0 80%, 100% 80%, 100% 100%, 0% 100%);
  clip-path: polygon(0 80%, 100% 80%, 100% 100%, 0% 100%);
  .centerd{
    color:white;
  }  
}
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet"/>
<div class="row">
  <div class="col s12 m4 l4">
    <div class="card">
      <div class="card-image">
        <img src="https://source.unsplash.com/400x300/?shoes">
        <div class="featured-price blue-text  text-darken-2 center-align">
          <span class="centerd">Text</span>

        </div>
      </div>
      <div class="card-content">
        <span class="card-title uk-margin-remove-vertical" id="package-title">Item Title</span>
        <span>Brand,</span>
        <span>Category</span>
        <br>
        <i class="material-icons review-star">star</i>
        <i class="material-icons review-star">star</i>
        <i class="material-icons review-star">star</i>
        <i class="material-icons review-star">star</i>
        <i class="material-icons review-star">star</i>
      </div>
    </div>
  </div>
    <div class="col s12 m4 l4">
    <div class="card">
      <div class="card-image">
        <img src="https://source.unsplash.com/400x300/?shoes">
        <div class="featured-price blue-text  text-darken-2 center-align">
          <span class="centerd">Text</span>

        </div>
      </div>
      <div class="card-content">
        <span class="card-title uk-margin-remove-vertical" id="package-title">Item Title</span>
        <span>Brand,</span>
        <span>Category</span>
        <br>
        <i class="material-icons review-star">star</i>
        <i class="material-icons review-star">star</i>
        <i class="material-icons review-star">star</i>
        <i class="material-icons review-star">star</i>
        <i class="material-icons review-star">star</i>
      </div>
    </div>
  </div>
    <div class="col s12 m4 l4">
    <div class="card">
      <div class="card-image">
        <img src="https://source.unsplash.com/400x300/?shoes">
        <div class="featured-price blue-text  text-darken-2 center-align">
          <span class="centerd">Text</span>

        </div>
      </div>
      <div class="card-content">
        <span class="card-title uk-margin-remove-vertical" id="package-title">Item Title</span>
        <span>Brand,</span>
        <span>Category</span>
        <br>
        <i class="material-icons review-star">star</i>
        <i class="material-icons review-star">star</i>
        <i class="material-icons review-star">star</i>
        <i class="material-icons review-star">star</i>
        <i class="material-icons review-star">star</i>
      </div>
    </div>
  </div>
</div>

如果有人能打印出我在上面犯的错误，我将非常感激。

标签： htmlcss

解决方案

尝试这个，

.review-star{
  color: #20BF55;
}
.featured-price{
    position: absolute;
    bottom: 20px;
    background: deeppink;
    color: white !important;
    padding: 10px;
  }
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet"/>
<div class="row">
  <div class="col s12 m4 l4">
    <div class="card">
      <div class="card-image">
        <img src="https://source.unsplash.com/400x300/?shoes">
        <div class="featured-price blue-text  text-darken-2 center-align">
          <span class="centerd">Text</span>

        </div>
      </div>
      <div class="card-content">
        <span class="card-title uk-margin-remove-vertical" id="package-title">Item Title</span>
        <span>Brand,</span>
        <span>Category</span>
        <br>
        <i class="material-icons review-star">star</i>
        <i class="material-icons review-star">star</i>
        <i class="material-icons review-star">star</i>
        <i class="material-icons review-star">star</i>
        <i class="material-icons review-star">star</i>
      </div>
    </div>
  </div>
    <div class="col s12 m4 l4">
    <div class="card">
      <div class="card-image">
        <img src="https://source.unsplash.com/400x300/?shoes">
        <div class="featured-price blue-text  text-darken-2 center-align">
          <span class="centerd">Text</span>

        </div>
      </div>
      <div class="card-content">
        <span class="card-title uk-margin-remove-vertical" id="package-title">Item Title</span>
        <span>Brand,</span>
        <span>Category</span>
        <br>
        <i class="material-icons review-star">star</i>
        <i class="material-icons review-star">star</i>
        <i class="material-icons review-star">star</i>
        <i class="material-icons review-star">star</i>
        <i class="material-icons review-star">star</i>
      </div>
    </div>
  </div>
    <div class="col s12 m4 l4">
    <div class="card">
      <div class="card-image">
        <img src="https://source.unsplash.com/400x300/?shoes">
        <div class="featured-price blue-text  text-darken-2 center-align">
          <span class="centerd">Text</span>

        </div>
      </div>
      <div class="card-content">
        <span class="card-title uk-margin-remove-vertical" id="package-title">Item Title</span>
        <span>Brand,</span>
        <span>Category</span>
        <br>
        <i class="material-icons review-star">star</i>
        <i class="material-icons review-star">star</i>
        <i class="material-icons review-star">star</i>
        <i class="material-icons review-star">star</i>
        <i class="material-icons review-star">star</i>
      </div>
    </div>
  </div>
</div>

推荐阅读