Text in center while keeping the background

Question

https://sololearn.com/compiler-playground/WbL5PWozjU19/?ref=app

Answer 1

But is it still an h3, though?

h3{
display:grid;
place-items:center;
background-color:#8b7487;
width:100px;
height:100px;
text-align:center;
}

Answer 2

Elena
width and height needs units, not pure numbers.

100px

not

100

also, proper formatting helps in readability. Try to put the properties on different lines.

The problem with css is that errors are ignored, so you have to be extra careful or debugging is hard.

Answer 3

Thank you

Answer 4

perhaps something like this?
use a div instead, so you can still use h3 for other things. I opted for a javascript solution because it is more versatile and animations can be reset after it is played. This is hard to do with pure css alone

https://sololearn.com/compiler-playground/WuqiDCM0e9AT/?ref=app

Answer 5

That's pretty good. Thanks

Answer 6

It doesn't keep the shape

https://sololearn.com/compiler-playground/WJysEXqJCgiD/?ref=app