Question 44505 in Html Question posted in
Some basic documentation can be found here.

No button of the page is centered – Html

I’ve been trying but nothing works,
https://jsfiddle.net/lucianopinochet/fzse5962/
If someone have and idea i would thank you a lot.

.container article button{
align-self: center;

}

<div class="container">
                    <article>
                        <h3>Free</h3>
                        <h4>Forever Free Plan</h4>
                        <p>Our generous free forever plan provides you with plenty to get started and get addicted to the tools that will take your work to the next level. No credit card required to get started.</p>
                        <ul>
                            <li>Unlimited pages & links</li>
                            <li>Up to 5 gigabytes of storage</li>
                            <li>Up to 20 databases</li>
                            <li>Share up to 50 pages via URL</li>
                            <li>Up to two guest users per page</li>
                        </ul>
                        <button>Sign Up Now</button>
                    </article>
              
                </div>
Tags:

2

Answers


  1. 0

    Try this:

    div{
    width:100%;
    display:flex;
    align-items:center;
    justify-content:center;
}

    <div>
   <button>submit</button>
</div>

    Buttons vertically and horizontally will be centered by this code.

    Login or Signup to reply.
  2. 0

    Try this :

    Give the parent element the same properties as in the example if you want to center your button using these properties.

     .container article button {
        align-self: center;
    }

    article {
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
    }
    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    
</head>


<body>
    <div class="container">
        <article>
            <h3>Free</h3>
            <h4>Forever Free Plan</h4>
            <p>Our generous free forever plan provides you with plenty to get started and get addicted to the tools that
                will take your work to the next level. No credit card required to get started.</p>
            <ul>
                <li>Unlimited pages & links</li>
                <li>Up to 5 gigabytes of storage</li>
                <li>Up to 20 databases</li>
                <li>Share up to 50 pages via URL</li>
                <li>Up to two guest users per page</li>
            </ul>
            <button>Sign Up Now</button>
        </article>

    </div>
</body>

</html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search