css设置文本固定在图片或者div的中间

有一点温柔

已于 2024-09-20 17:51:26 修改

阅读量129

点赞数 2

文章标签： css 前端 html

于 2024-09-20 17:51:10 首次发布

本文链接：https://blog.csdn.net/weixin_51313691/article/details/142391625

版权


<div class="sider-title">

  <h5 class="sider-title_h">XXX</h5>

</div>

.sider-title{

  height: 40px;

  background:url('XXX.png');

  background-repeat: no-repeat;

  background-size: 45% 85%;

  transform: translate(80px, -20%);

  position: relative;

  left: -80px;

  top: -4px;

  display: flex;

  justify-content: center;

  align-items: center;

  background-position: center;

}

.sider-title_h{

  text-align: center;

  font-family: PingFangSC-Medium;

  font-size: 18px;

  letter-spacing: 0;

  font-weight: 500;

  letter-spacing: 6px;

  color: white;

  width: 140px;

  position: absolute;

  height: 20px;

}

设置css样式

div：

position: relative;

display: flex;

justify-content: center;

align-items: center;

background-position: center;

文本：

position: absolute;