在下面的html代码段中，我尝试将文本放置在类别为div的绝对位置featured-price的中心。但是span中centerd类的文本在div中不可见。我正在使用**实现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>
如果有人能打印出我上面一直犯的错误，我将非常感激。
答案 0 :(得分：0)
尝试一下，
.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>
答案 1 :(得分：0)
将/opt/Xilinx/14.7/ISE_DS/ISE/bin/lin64/unwrapped/fuse -relaunch -intstyle "ise" -incremental -lib "unisims_ver" -lib "unimacro_ver" -lib "xilinxcorelib_ver" -lib "secureip" -o "/home/divyanshu/Desktop/Verilog_SimpleCalculator/segment_7_test_isim_beh.exe" -prj "/home/divyanshu/Desktop/Verilog_SimpleCalculator/segment_7_test_beh.prj" "work.segment_7_test" "work.glbl"
ISim P.20131013 (signature 0xfbc00daa)
Number of CPUs detected in this system: 4
Turning on mult-threading, number of parallel sub-compilation jobs: 8
Determining compilation order of HDL files
Analyzing Verilog file "/home/divyanshu/Desktop/Verilog_SimpleCalculator/segment_7.v" into library work
Analyzing Verilog file "/home/divyanshu/Desktop/Verilog_SimpleCalculator/segment_7_test.v" into library work
ERROR:HDLCompiler:806 - "/home/divyanshu/Desktop/Verilog_SimpleCalculator/segment_7_test.v" Line 49: Syntax error near "100".
ERROR:HDLCompiler:806 - "/home/divyanshu/Desktop/Verilog_SimpleCalculator/segment_7_test.v" Line 51: Syntax error near "for". ERROR:HDLCompiler:69 - "/home/divyanshu/Desktop/Verilog_SimpleCalculator/segment_7_test.v" Line 51: is not declared.
ERROR:HDLCompiler:69 - "/home/divyanshu/Desktop/Verilog_SimpleCalculator/segment_7_test.v" Line 55: is not declared. ERROR:HDLCompiler:598 - "/home/divyanshu/Desktop/Verilog_SimpleCalculator/segment_7_test.v" Line 25: Module ignored due to previous errors.
Verilog file /home/divyanshu/Desktop/Verilog_SimpleCalculator/segment_7_test.v ignored due to errors
========== Fuse: failed ==========
类的高度从180px更改为60px，如下所示，并删除.featured-price
clip-path答案 2 :(得分：0)
只需删除CSS下面的内容，一切都会按预期进行。
-webkit-clip-path: polygon(0 80%, 100% 80%, 100% 100%, 0% 100%);
clip-path: polygon(0 80%, 100% 80%, 100% 100%, 0% 100%);
height: 180px;