How do i change the Width of text but keep it in the middle-CodePudding

i have a text P element

In css ive used text-align: center; to center the text in the middle of the screen which works.

but if i want the text to have more space on both sides by using "width 80%" it puts all the text on the left side of the screen completely ignore text align center (except for the text still looking centered just not in the center of the screen.

btw, i refuse to just use margin, padding, left, right pixels because it forces the pixels. i want to be able to change my window size and keep things in propotion

I want the text to be in the middle. not approxemately or calculated by hand..

so simply, i just want text with some space on both sides equally.

Together with "width: 80%", i tried;

justify-content: center;
justify-self: center;
justify-items: center;
align-content: center;
align-self: center;
align-items: center;

(not all at the same time obviously)

none of it worked.

CodePudding user response：

content are in middle , you are something wrong , try like below,

  p
  {
    width:80%;
    text-align: center;
  }

<p>test</p>

CodePudding user response：

Combining the given comment an answer into one answer:

This will create an 80% wide p element and center it aswell as centering the text inside.

  p
  {
    width:80%;
    text-align:center;
    margin: auto;
  }

<p>test</p>

CodePudding user response：

If you need any more modifications, let me know in the command line

 body {
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            height: 80vh;
            width: 100%;
        
        }
         p{
            color: red;

         }

<html>

<head>
    <title>Center a text</title>
</head>

<body>
    <p>Mechanical Keyboards have great feedback</p>
</body>

</html>