Can´t center the p element when it has a background-color with a set width

Question

I´m having trouble automatically centering the p element without the use of margin-left. The body element is center aligned but since there is a background color on the p element it doesn´t work on it...

    p {
      background-color: dimGray;
      width:250px;
      margin-left: 630px;
      
    }
    
    h3 {
      margin: 20px;
    }
    
    h1 {
      margin-top: 30px
    }
    
    a {
      color: red;
    }
    
    body {
      background-color: black;
      color: white;
      text-align: center;
      font-family: "Verdana", sans-serif;
    }

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Netflix</title>
      <link rel="stylesheet" href="style/style.css">
    </head>
    <body>
      <img src="https://lh3.googleusercontent.com/proxy/nusBlyscc3HZ_yW7ZSTS3E-Ci8ZZv_ALi1K1eWse3rlX2emUBz_tW0XbCMh9yp_pAnOLN24Ct2OWoBNvH629ziJr9EK_Q3PCB73IwAughUCGA4nZhjN1NvkAIVOq4LGIlw">
    
      <h1>See what´s next</h1>
      <h3>Watch anywhere, but mostly from home</h3>
      <a href="https://mimo.app/r/homeflix.html">Try 30 Days Free</a>
      <p>Watch TV shows and movies</p>
      
      <script src="script.js"></script>
    </body>
    </html>

It´s the grey box I have trouble with centering automatically. I can´t seem to find a way to do it.

Done now :D Please get back if you know how to solve this :) — Sigge Thorén, Aug 12 '20 at 21:47

score 0 · Answer 1 · answered Aug 12 '20 at 21:48

0

Since you gave the "p" a specific width, now you can give it

p{
   /* your current style */
   margin:auto;
}

Elements with "display:block" property like headers and paragraphs and others, can be centered if you add margin:auto to them after you give them a specific width, without a fixed width, they will take the whole page width

answered Aug 12 '20 at 21:48

Menawer

843
4
12

Thank you. It worked great but the grey box is very close to the text now. How can I change that? – Sigge Thorén Aug 12 '20 at 21:52
1

You give it padding, or you mean the text on top of it? – Menawer Aug 12 '20 at 21:53
Thank you very much my friend :) – Sigge Thorén Aug 12 '20 at 21:59

score 0 · Answer 2 · answered Aug 12 '20 at 21:50

to achieve the desired result, you need to add margin-left: auto; and margin-right: auto; and remove margin-left: 630px; in p tag.

p {
      background-color: dimGray;
      width:250px;
      /*margin-left: 630px;*/
      margin-left: auto;
      margin-right: auto;
      
    }
    
    h3 {
      margin: 20px;
    }
    
    h1 {
      margin-top: 30px
    }
    
    a {
      color: red;
    }
    
    body {
      background-color: black;
      color: white;
      text-align: center;
      font-family: "Verdana", sans-serif;
    }

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Netflix</title>
      <link rel="stylesheet" href="style/style.css">
    </head>
    <body>
      <img src="https://lh3.googleusercontent.com/proxy/nusBlyscc3HZ_yW7ZSTS3E-Ci8ZZv_ALi1K1eWse3rlX2emUBz_tW0XbCMh9yp_pAnOLN24Ct2OWoBNvH629ziJr9EK_Q3PCB73IwAughUCGA4nZhjN1NvkAIVOq4LGIlw">
    
      <h1>See what´s next</h1>
      <h3>Watch anywhere, but mostly from home</h3>
      <a href="https://mimo.app/r/homeflix.html">Try 30 Days Free</a>
      <p>Watch TV shows and movies</p>
      
      <script src="script.js"></script>
    </body>
    </html>

score 0 · Answer 3 · answered Aug 12 '20 at 21:52

0

I would recommend looking at flexbox for aligning elements. You can find some information on it on the Mozilla Developer Site

You can get used to using it very quickly and avoids a lot of "messy" styling.

answered Aug 12 '20 at 21:52

John Nolan

19
7

Can´t center the p element when it has a background-color with a set width

3 Answers3