CODEWITHSUNDEEP
htmlcsscanvas
JackU
JackU

Reputation: 1476

Canvas inside of button with text

I have put a canvas inside of a button. The canvas displays a .png image. I want to be able to display text within the button and on top of the canvas all centralised.

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%;
    }
}

This is how it currently looks:
enter image description here

I'm using Pesticide on Chrome so that you can see the outlines, you can see that the word "button" is pushing the canvas over. I want the word "button" directly on top of the canvas.

Here is an example of the issue.

I assume this is something I change in the CSS but I can't figure what property to set/change.

Thanks in advance.

Upvotes: 0

Views: 144

Answers (1)

Nisharg Shah
Nisharg Shah

Reputation: 19612

For center you image and text, i used flexbox properties of CSS

I added below properties in your button for center

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

Your stackblitz: https://stackblitz.com/edit/angular-4sazcq

EDIT 1

I used position property to center it

Your stackblitz: https://stackblitz.com/edit/angular-i7bozo

Upvotes: 1

Related Questions