如何使css按钮的定位居中？答案

【问题标题】：How to center the positioning of the css button?如何使css按钮的定位居中？
【发布时间】：2021-04-07 05:50:24
【问题描述】：

我的 .一些按钮居中，而其他按钮未居中。

<style type="text/css">.btn {
    background-color:transparent;
    border-radius:28px;
    border:1px solid #67823A;
    display:inline-block;
    cursor:pointer;
    color:#67823A;
    font-family:Tahoma;
    font-size:14px;
    padding:4px 13px;
    text-decoration:none;
    position: absolute;
    bottom: 5%;
    left: 10%;
}
.btn:hover {
    background-color:#67823A;
    border-color:#67823A;
}

编辑：

下面列出的是 HTML 代码。

请记住，我正在通过 SaaS 应用程序编辑此代码，该应用程序提供了编辑 html/css 代码的能力。从外观上看，我已经有了一个包含按钮选项的 div。

<div class="col-12 col-md-6 col-lg-4 py-3 text-center border"><img class="img-fluid" font-family:lucida="" sans=""
                    src="/images/contentimages/images/Newsletter.png" /></a>

        <p class="my-3" style="font-size:18px;">&nbsp;</p>
        <a class="btn btn-info btn-sm edatalayer order-1" data-list="product-listing-page" data-position="1"
            data-purl="custom-business-forms" href="http://example.com/">Newsletters <i
                class="far fa-chevron-right pl-1"></i></a>
    </div>

    <div class="col-12 col-md-6 col-lg-4 py-3 text-center border"><a
            href="http://example.com/"><img class="img-fluid"
                font-family:lucida="" sans="" src="/images/contentimages/images/Presentation_Folder.png" /></a>

        <p class="my-3" style="font-size:18px;">&nbsp;</p>
        <a class="btn btn-info btn-sm edatalayer order-1" data-list="product-listing-page" data-position="1"
            data-purl="custom-business-forms"
            href="http://example.com/">Presentation Folders <i
                class="far fa-chevron-right pl-1"></i></a>
    </div>

    <div class="col-12 col-md-6 col-lg-4 py-3 text-center border"><a
            href="http://example.com/"><img class="img-fluid" font-family:lucida=""
                sans="" src="/images/contentimages/images/Foldover_Business_Cards.png" /></a>

        <p class="my-3" style="font-size:18px;">&nbsp;</p>
        <a class="btn btn-info btn-sm edatalayer order-1" data-list="product-listing-page" data-position="1"
            data-purl="custom-business-forms" href="http://example.com/">Foldover
            Business Cards <i class="far fa-chevron-right pl-1"></i></a>
    </div>
</div>

【问题讨论】：

寻求代码帮助的问题必须包含重现它所需的最短代码在问题本身中最好在Stack Snippet 中。见How to create a Minimal, Reproducible Example
你应该分享你的完整代码，不清楚

标签： html css button css-position absolute

【解决方案1】：

我建议使用 flexbox。只需将您的按钮包裹在 div 元素中，将 div 的 display 属性设置为 flex 并将 justify-content 属性设置为 center 即可。

由于您没有共享代码 sn-p，因此我制作了自己的极简代码 sn-p。

<html>
    <head>
        <link href="./style.css" rel="stylesheet" type="text/css" />
    </head>
    
    <body>
        <div class="flex-container">
            <button class="btn">some button</button>
        </div>
    </body>
</html>

下面是与之配套的 CSS：

.flex-container {
    display: flex;
    justify-content: center;
}

完整的 flexbox 指南可以在这里找到： https://css-tricks.com/snippets/css/a-guide-to-flexbox/

【讨论】：

【解决方案2】：

尝试将按钮放在 div 中，然后您可以配置 div 和按钮。我希望它对你有帮助。它链接到 w3schools。

Center a Button in DIV

【讨论】：