How to centre text with background

Question

https://code.sololearn.com/WCdfdwc9igQ7/?ref=app

Answer 1

Got the correct code

https://code.sololearn.com/WCdfdwc9igQ7/?ref=app

Answer 2

Put this in CSS page
------------------------------------
body{
padding-left:5px;
}

h1{
color:white;
text-align:center ;
}
.middle {
background:red;
border-radius: 40px;
width:100%;
border-style:double ;
border-color:pink;
}

Answer 3

MuhammadⓂ️🥇🛡️✔️ that would work, but the box would then take the whole page and he set it to 60% before.

I suggest using
-----------------------------------------
margin-left: auto;
margin-right: auto;
-----------------------------------------
To center horizontally

And to center horizontally and vertically, I would use
-----------------------------------------
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
-----------------------------------------

I have not yet tested this, so please correct me if I'm wrong.

Happy coding!

Answer 4

Thanks I tried both the codes but not getting desired effect

MuhammadⓂ️🥇🛡️✔️ I tried code suggested by you but then background colour occupies entire width and what I want is to occupy only text area.

Ruben 💞 thanks but with this code it's still left aligned without background colour.

Thanks again.

Answer 5

Sanket Ichharam Barde good job!