文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >将文本放置在绝对定位div的中心

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

Stack Overflow用户
提问于 2018-10-08 10:02:43
回答 3查看 52关注 0票数 0

在下面的html片段中，我尝试将文本放在绝对定位的div的中心，并使用类featured-price。但是span中包含类centerd的文本在div中不可见。我正在使用**实现css **框架进行开发。

​

代码语言：javascript
复制
.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;
  }  
}
代码语言：javascript
复制
<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>

​

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

html
css
EN

回答 3

Stack Overflow用户

回答已采纳

发布于 2018-10-08 10:17:35

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

代码语言：javascript
复制
    .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*/
    }
票数 0
EN

Stack Overflow用户

发布于 2018-10-08 10:13:24

尝尝这个,

​

代码语言：javascript
复制
.review-star{
  color: #20BF55;
}
.featured-price{
    position: absolute;
    bottom: 20px;
    background: deeppink;
    color: white !important;
    padding: 10px;
  }
代码语言：javascript
复制
<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
EN

Stack Overflow用户

发布于 2018-10-08 10:25:59

只要移除CSS下面的内容，一切就像你所期望的那样工作。

代码语言：javascript
复制
-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;
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/52699849

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档