html - 移动站点中的居中按钮

Question

我在这个页面的底部有一个联系按钮:

在网站的移动版本(小于 770 像素)中，我希望它居中。

HTML:

<div class="white, home_contact_btn wpb_column vc_column_container vc_col-sm-4">
    <div class="wpb_wrapper">
        <a class="laborator-btn btn btn-index-1 btn-type-standard  contact-btn btn-primary btn-normal" target="" title="GET IN CONTACT" href="http://www.estiponagroup.com/dev/contact/">GET IN TOUCH</a>
    </div>
</div>

CSS

.home_contact_btn a{
    margin:0 auto;
    text-align:center;
}

Answer 1

anchor 本质上是一个内联元素，可以通过将 text-align:center; 应用于其父元素来居中:

.wpb_wrapper{
    text-align:center;
}

此外，如果您希望它在不定位父级的情况下居中，您可以将内联元素显示为 block 级元素，然后将其中的文本居中。

.home_contact_btn a{
    display:block;
    text-align:center;
}

最后，如果您希望按钮具有特定宽度，请添加该宽度，然后您就可以使用代码中的自动边距。

.home_contact_btn a{
    display:block;
    text-align:center;
    width:50%;
    margin:0 auto;
}