css 页面没有居中按钮

x0fgdtte 于 2023-03-09 发布在其他

关注(0)|答案(2)|浏览(138)

我试过了但是没用，
https://jsfiddle.net/lucianopinochet/fzse5962/
如果有人有什么想法，我会非常感谢你。

.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>

css

来源：https://stackoverflow.com/questions/75639806/no-button-of-the-page-is-centered

2条答案

按热度按时间

sbtkgmzw1#

试试这个：

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

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

垂直和水平方向的按钮将以此代码居中。

赞(0）回复(0）举报 2023-03-09

c9qzyr3d2#

试试这个：
如果希望使用这些属性使按钮居中，请为父元素提供与示例中相同的属性。

.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>

赞(0）回复(0）举报 2023-03-09

我来回答

css 页面没有居中按钮

2条答案

相关问题

热门标签

最新问答