Question

我在本页底部有一个Get in Touch按钮：

在网站的移动版本（小于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

锚本身就是一个内联元素，可以通过将var count: DWORD; begin count := Trunc(3 / 1.699999); Write(IntToStr(count));应用于其父元素来居中：

text-align:center;

此外，如果您希望它居中而不定位父级，则可以将内联元素显示为块级元素，然后将文本置于其中心。

.wpb_wrapper{
    text-align:center;
}

最后，如果你想在按钮上有一定的宽度，添加那个宽度，然后就可以使用代码中的自动边距。

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

Answer 2

设置为父容器text-align：center;

@media (max-width:700px){
.wpb_wrapper{
   text-align:center;

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

fiddle

Answer 3

只需使用：

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

或者，使用此：

.wpb_wrapper {
text-align : center;
}

它们都有效，但我建议您使用第一个选项，因为在第二个选项中，所有锚点（<a>元素）都将居中。

如果您在“Get in Touch”按钮的父元素中没有任何其他锚点，则第二个选项也将按预期工作。

移动网站中的中心按钮

3 个答案: