text align center html/css

Issue

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 class="new">
    New
</p>
<p class="mac">
    MacBook Pro
</p>
<p class="pros">
    Supercharged for pros.
</p>
<p class="f">
   From $1999 
</p>
<p>
   <span class="buy">Buy</span>
</p>

Solution

Your last p need class and you should write text-align:center for your p not span i show you how to write this code in html and css:

   <p class="buy1">
   <span class="buy">Buy</span>
   </p>


    .buy1{
    text-align: center;
     }

Answered By – Erfan Hatami

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply

(*) Required, Your email will not be published