css按钮如何居中定位？

Question

我无法将我的 .有些按钮居中，然后其他按钮不居中。

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

Answer 1

我建议使用 flexbox。只需将按钮包裹在 div 元素内，将 div 的 display 属性设置为 flex 并将 justify-content 属性到 center 就大功告成了。

由于您没有分享代码片段，我制作了自己的极简代码片段。

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

Answer 2

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

Center a Button in DIV

css按钮如何居中定位？

How to center the positioning of the css button?

html

css

css-position

button

absolute