Холст внутри кнопки с текстом

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, чтобы вы могли видеть контуры, вы видите, что слово «кнопка» толкает холст. Я хочу, чтобы слово «кнопка» находилось прямо поверх холста.

Вот пример вопроса.

Я предполагаю, что это то, что я изменяю в CSS, но я не могу понять, какое свойство установить / изменить.

Заранее спасибо.

Answer 1

Для центрирования изображения и текста, я использовал flexbox свойства CSS

Я добавил ниже свойства в вашей кнопке для центра

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

Ваш стек: https://stackblitz.com/edit/angular-4sazcq

РЕДАКТИРОВАТЬ 1

Я использовал position свойство для его центрирования

Ваш стек: https://stackblitz.com/edit/angular-i7bozo