'How do I get my bottom "Buy now" text to center with my other text? note: I'm only a couple weeks into learning

<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 class="new-title">New</p>
<p class="macbook-title">MacBook Pro</p>
<p class="supercharge-title">Supercharged for pros</p>
<p class="price-title">From $1999</p>
<p>
  <span class="buy-title">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.
htmlcss


Solution 1:[1]

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;
  }

Solution 2:[2]

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 class="container">
<p class="new-title">New</p>
<p class="macbook-title">MacBook Pro</p>
<p class="supercharge-title">Supercharged for pros</p>
<p class="price-title">From $1999</p>
<p>
  <span class="buy-title">Buy</span>
</p>
</div>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Dean Van Greunen
Solution 2 Suraj Sanwal

Related Questions