在下面的 html 片段中,我尝试将文本放在绝对定位的 div
的中心,类 featured-price
。但是 span
中带有类 centerd
的文本在 div 中是不可见的。我正在使用 **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*/
}
关于html - 将文本放在绝对定位的 div 的中心,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52699849/