Javascript 如何将a<；部门>；在其他几个方面<；部门>；s（混合使用w3.css和css）

我正在使用W3CSS和bog标准css

我有一个png的单词：INSPIRE，它的字母是透明的。字母后面是彩色矩形。在彩色矩形的前面是白色矩形，根据矩形的高度，给人以填充字母的印象。示例（）将白色矩形设置为50%高度。在原版中，这些高度由从数据库中提取的数字确定，而不是按脚本中的方式设置

INSPIRE的填充过程如下：

有一个名为w3 third的“w3 div”，其中有另一个名为w3 card的div，其中有一个普通div，样式为header，称为back，其中包含每个字母块的div，最后是INSPIRE png的div。我使用z值，因此png位于顶部

我一辈子都无法将INSPIRE图像放在w3 card分区的中心位置

如果我能挥动魔杖，那么我会“居中”后跳水。我试过设置一个宽度

 #back {
          position: absolute;
          width: 294px;
          margin: 0 auto;
          z-index: 0;
        }

但这没什么区别

求你了，在我脑袋爆炸之前帮我一下

以下是链接的完整页面代码：

激发
#背{
位置：绝对位置；
宽度：294px；
保证金：0自动；
z指数：0；
}
#贝欣迪{
位置：绝对位置；
左：0px；
z指数：1；
}
#落后{
位置：绝对位置；
左：33像素；
z指数：1；
}
#落后{
位置：绝对位置；
左：80px；
z指数：1；
}
#落后{
位置：绝对位置；
左：113px；
z指数：1；
}
#贝辛迪{
位置：绝对位置；
左：160像素；
z指数：1；
}
#落后的{
位置：绝对位置；
左：200px；
z指数：1；
}
#贝欣德{
位置：绝对位置；
左：247px；
z指数：1；
}
#正面{
位置：绝对位置；
z指数：3；
}
#myCanvasI{
z指数：2；
}
var i=0.5；
var n=0.5；
var s=0.5；
var p=0.5；
var ii=0.5；
var r=0.5；
var e=0.5；
学习的特点

你在每个领域都做得怎么样

你是最受鼓舞的人吗

var z=document.getElementById（“myCanvasI”）；
var ctx=z.getContext（“2d”）；
ctx.fillStyle=“红色”；
ctx.fillRect（0,0,33,33）；
ctx.stroke（）；
ctx.fillStyle=“白色”；
ctx.fillRect（0,0,33,33*i）；
ctx.stroke（）；
var y=document.getElementById（“myCanvasN”）；
var ctx=y.getContext（“2d”）；
ctx.fillStyle=“橙色”；
ctx.fillRect（0,0,47,33）；
ctx.stroke（）；
ctx.fillStyle=“白色”；
ctx.fillRect（0,0,47,33*n）；
ctx.stroke（）；
var x=document.getElementById（“MyCanvas”）；
var ctx=x.getContext（“2d”）；
ctx.fillStyle=“黄色”；
ctx.fillRect（0,0,33,33）；
ctx.stroke（）；
ctx.fillStyle=“白色”；
ctx.fillRect（0,0100,33*s）；
ctx.stroke（）；
var w=document.getElementById（“myCanvasP”）；
var ctx=w.getContext（“2d”）；
ctx.fillStyle=“绿色”；
ctx.fillRect（0,0,47,33）；
ctx.stroke（）；
ctx.fillStyle=“白色”；
ctx.fillRect（0,0,47,33*p）；
ctx.stroke（）；
var v=document.getElementById（“myCanvasII”）；
var ctx=v.getContext（“2d”）；
ctx.fillStyle=“蓝色”；
ctx.fillRect（0,0,40,33）；
ctx.stroke（）；
ctx.fillStyle=“白色”；
ctx.fillRect（0,0,40,33*ii）；
ctx.stroke（）；
var u=document.getElementById（“myCanvasR”）；
var ctx=u.getContext（“2d”）；
ctx.fillStyle=“靛蓝”；
ctx.fillRect（0,0,47,33）；
ctx.stroke（）；
ctx.fillStyle=“白色”；
ctx.fillRect（0,0,47,33*r）；
ctx.stroke（）；
var t=document.getElementById（“myCanvasE”）；
var ctx=t.getContext（“2d”）；
ctx.fillStyle=“紫色”；
ctx.fillRect（0,0,47,33）；
ctx.stroke（）；
ctx.fillStyle=“白色”；
ctx.fillRect（0,0,47,33*e）；
ctx.stroke（）；

您不能使用

位置：绝对对于边距0自动，您需要使用相对位置或静态位置来执行此操作
您不能使用
位置：绝对位置对于边距0自动，您需要使用相对位置或静态位置来执行此操作
只需添加另一个div，用黑色id将div包裹起来，如下所示

    <div style="
        display: inline-block;
        width: 295;
        height: 35px;
        margin: auto;
    ">
    <div id="back"> you stuff in this div </div>
    </div>


你在这个部门工作

以防您想将id为黑色的div作为
position:ab
 #back {
          position: absolute;
          width: 294px;
          margin: 0 auto;
          z-index: 0;
          left: 0px;
          right: 0px;
        }

#w3-card {
   position: relative;
}

.w3-card-2{ position: relative; }
#back{ left: 50%; margin-left: -146px; }

.w3-card-2 {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
}