the problem pic

ok i want the [buy] text to be in center the problem that i write text-align: center; but nothing worked and thats the code..

.buy {
    background-color: rgb(73, 73, 247);
    font-weight: bold;
    padding-left: 15px;
    padding-right: 15px;
    padding-top: 7px;
    padding-bottom: 7px;
    color: white;
    border-radius: 30px;

}
.f {
    text-align: center;
    margin-top: 0;
    margin-bottom: 0;
}
.pros {
    font-weight: bold;
    text-align: center;
    font-size: 42px;
    margin-top: 3px;
    margin-bottom: 15px;

}

.mac {
    text-align: center;
    font-weight: bold;
    font-size: 25px;
    margin-top: 5px;
    margin-bottom: 0;
}
.new {
    text-align: center;
    font-weight: bold;
    color: orangered;
    margin-bottom: 0;

}
.p {
    font-family: Arial;
    text-align: center;

}

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

CodePudding user response：

Because its span span is an inline element if u want to centre cover it with div.

CodePudding user response：

.buy {
    background-color: rgb(73, 73, 247);
    font-weight: bold;
    padding-left: 15px;
    padding-right: 15px;
    padding-top: 7px;
    padding-bottom: 7px;
    color: white;
    border-radius: 30px;

}
.f {
    text-align: center;
    margin-top: 0;
    margin-bottom: 0;
}
.pros {
    font-weight: bold;
    text-align: center;
    font-size: 42px;
    margin-top: 3px;
    margin-bottom: 15px;

}

.mac {
    text-align: center;
    font-weight: bold;
    font-size: 25px;
    margin-top: 5px;
    margin-bottom: 0;
}
.new {
    text-align: center;
    font-weight: bold;
    color: orangered;
    margin-bottom: 0;

}
.p{
    font-family: Arial;
    text-align: center;

}

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

CodePudding user response：

hello you should use class for last p its mean give class for buy container and write text-align center for container send look at this code :

   <p >
   <span >Buy</span>
   </p>


    .buy1{
    text-align: center;
     }