What I want to do is to use <p onclick='this.innerHTML++'>0</p>
and make this code have a black background that covers the whole screen and center the text in it. I want it to not have a body element or an html element as I just want the <p>
element.
I tried using box-shadows and the transform property in the style
attribute.
<p onclick='this.innerHTML++' style='color: white; width: 100vw; height: 100vh; transform: translate(-50vw, -50vh); box-shadow: 50vw 50vh black;'>0</p>
That just displayed a quarter of the viewport a fourth of whiteness which meant the box-shadow wasn’t working. I found it added a margin, so I removed it. It still didn’t work. It centered the text though. I know how to do it with 2 elements, but I want to keep the code with only the <p>
element.
This time I tried using the background property.
<p onclick='this.innerHTML++' style='color: white; width: 100vw; height: 100vh; background: black; text-align: center'>0</p>
This time the code did everything correctly except positioning the text vertically centered.
Is it possible to do this all in 1 element, center the text both horizontally and vertically, and display a black background that covers the whole screen?
>Solution :
To center content you can either use flex or grid:
display: flex;
justify-content: center;
align-items: center;
or with grid, it’s just two lines:
display: grid;
place-content: center;
I created a snippet for you. I changed your <p>
tag to a button, since this would be more semantic valid HTML. You can of course use any element you like.
button {
margin: 0;
padding: 0;
height: 100vh;
width: 100vw;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
display: grid;
place-content: center;
font-size: 3rem;
color: #fff;
background-color: rebeccapurple;
}
<button onclick="this.innerHTML++" type="button">0</button>