How do I get my bottom "Buy now" text to center with my other text? note: I'm only a-CodePudding

<style>
  .new-title {
    font-family: arial;
    text-align: center;
    color: orange;
    font-weight: bold;
    font-size: 15px;
    margin-bottom: 5px;
  }

  .macbook-title {
    font-family: arial;
    font-size: 20px;
    font-weight: bold;
    text-align: center;
    margin-top: 0;
    margin-bottom: 5px;
  }

  .supercharge-title {
    font-family: arial;
    font-size: 35px;
    text-align: center;
    font-weight: bold;
    margin-top: 0;
    margin-bottom: 0;
  }

  .price-title {
    font-family: arial;
    font-size: 15px;
    text-align: center;
    margin-top: 10px;
    font-weight: 5px;
    margin-bottom: 15px;
  }


  .buy-title {
    background-color: blue;
    color: white;
    margin-left: 1000px;
    padding-left: 15px;
    padding-right: 15px;
    padding-top: 5px;
    padding-bottom: 5px;
    border-radius: 20px;
  }
</style>

<p >New</p>
<p >MacBook Pro</p>
<p >Supercharged for pros</p>
<p >From $1999</p>
<p>
  <span >Buy</span>>
</p>

New

MacBook Pro

Supercharged for pros

From $1999

Buy>

I approached it like the rest of my code, with text-align: center; but for some reason it doesn't move like my other text does, I've also tried margining but that doesn't seem like an efficient way to do it.

CodePudding user response：

change your .buy-title to this. Live Demo Here

  .buy-title {
    display:block;
    background-color: blue;
    color: white;
    margin: 0px auto;
    padding-left: 15px;
    padding-right: 15px;
    padding-top: 5px;
    padding-bottom: 5px;
    border-radius: 20px;
    width: fit-content;
  }

CodePudding user response：

There are many ways to do so, But I suggest as you are very new to CSS you must go with CSS Flex. It will definetely boost your CSS skills.

You can see the snippet below how simple it is.

Refer this to learn more about flex: https://www.w3schools.com/css/css3_flexbox.asp

.container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.new-title {
    font-family: arial;
    text-align: center;
    color: orange;
    font-weight: bold;
    font-size: 15px;
    margin-bottom: 5px;
  }

  .macbook-title {
    font-family: arial;
    font-size: 20px;
    font-weight: bold;
    text-align: center;
    margin-top: 0;
    margin-bottom: 5px;
  }

  .supercharge-title {
    font-family: arial;
    font-size: 35px;
    text-align: center;
    font-weight: bold;
    margin-top: 0;
    margin-bottom: 0;
  }

  .price-title {
    font-family: arial;
    font-size: 15px;
    text-align: center;
    margin-top: 10px;
    font-weight: 5px;
    margin-bottom: 15px;
  }


  .buy-title {
    background-color: blue;
    color: white;
    padding-left: 15px;
    padding-right: 15px;
    padding-top: 5px;
    padding-bottom: 5px;
    border-radius: 20px;
  }

<div >
<p >New</p>
<p >MacBook Pro</p>
<p >Supercharged for pros</p>
<p >From $1999</p>
<p>
  <span >Buy</span>
</p>
</div>