带有文字的按钮内的画布

Question

我已将画布放在按钮内。画布显示一个.png图像。我希望能够在按钮内和画布顶部集中显示所有文本。

HTML：

<div id="ST"> 
   <button id="btn1">button<canvas width="106" height="50"></canvas></button>
</div>

CSS（.scss）：

#ST {
    button {
        margin-top: 8%;
        background: none;
        border: none;
        position: absolute;
            canvas {
                z-index: -1;    
            }
    }
    #btn1{
        left: 22%;
    }
}

当前外观如下：

我在Chrome上使用了农药，以便您可以看到轮廓，可以看到“按钮”一词正在将画布推翻。我希望将“按钮”一词直接放在画布顶部。

这是问题的example。

我认为这是我在CSS中进行的更改，但是我无法确定要设置/更改的属性。

谢谢。

Answer 1

为了使图像和文字居中，我使用了CSS的flexbox属性

我在中心按钮的属性下方添加了

display: flex;
flex-direction: column-reverse;
align-items: center;

您的堆叠闪电战：https://stackblitz.com/edit/angular-4sazcq

编辑1

我使用了position属性来居中

您的堆叠闪电战：https://stackblitz.com/edit/angular-i7bozo