text alignment issue

[akhil2404]

while practicing exercise 5e the alignment of Buy button in the center is not getting fixed. is their any other method for button alignments in the center.

New

Macbook Pro

Supercharged for pros.

From $1999

Buy

[Swapnil-079]

hi akhil2404 you can try "margin-left" property for aligning the button at the center for now.

you can also do the same using div tag which has been taught in the 9th chapter

[codeaj001]

Can I see your html code?

[Swapnil-079]

    <style>
        p{
            margin-top: 0px;
            margin-bottom: 0px;
            font-family: Arial;
        }
        .new{
           margin - top 10px;
            font-size: 15px;
            color: red;
            text-align: center;
            margin-bottom: 5px;
        }
        .macbook{
            font-size: 18px;
            font-weight: bold;
            text-align: center;
            margin-bottom: 4px;
        }
        .supercharged{
            font-size: 24px;
            font-weight: bold;
            text-align: center;
            margin-bottom: 5px;
        }
        .price{
            text-align: center;
            font-size: 14px;
            margin-bottom: 5px;
        }
        .buy{
            margin-left: 350px;
            background-color: blue;
            color: white;
            border: none;
            padding-left: 8px;
            padding-right: 8px;
            padding-top: 3px;
            padding-bottom: 3px;
            border-radius: 10px;
        }

    </style>

    <p class="new">
        New
    </p>
    <p class="macbook">
        MacBook Pro
    </p>
    <p class="supercharged">
        Supercharged for pros.
    </p>
    <p class="price">
        From $1999
    </p>
    <p >
        <button class="buy">
            Buy
        </button>
    </p>

[HonDiCoder]

Don't used margin-left. That will fails if u change device or pixel view. Take new class for that and display it by text-align:center. Try this , still keep CSS with class 'buy'. But take one more CSS class like 'fix-bug' first paragrap before button.

Text me if u need more help. @akhil2404 danghoangduy120300@gmail.com

[HonDiCoder]

Example code :

<p class="fix">
<button class="buy>
Buy</button>
</p>

[Sumitkumar033]

just go with the padding:5px

which create the equal pixels around the text and make it to the center