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

debugcn 发表于 Dev

卡卓·劳尼亚尔

在下面的 html 片段中，我尝试将文本放置在divclass绝对定位的中心featured-price。但是spanclass里面的文本在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>

如果有人可以打印出我在上面犯的错误，我将不胜感激。

维卡斯·贾达夫

.featured-price如下所示将类的高度 180px 更改为 60px并删除clip-path

    .featured-price{
       height:60px;
      /* -webkit-clip-path: polygon(0 80%, 100% 80%, 100% 100%, 0% 100%);
       clip-path: polygon(0 80%, 100% 80%, 100% 100%, 0% 100%); remove this clip-path*/
    }

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。