在 div 中居中 <a> 标签

Question

目前我的按钮有问题。我希望能够将我的“a”标签居中，但目前它只会粘在左侧。我试过使用“display:block”，但这会使我的按钮占据它所放入的任何 div 的整个宽度。

HTML:

 <a href="#" class="button blue">Apply Now</a>

CSS：

 .button {
    padding:1em;
    text-align: center;
    display:inline-block;
    text-decoration: none !important;
    margin:0 auto;

    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}

原文由 Nazar Abubaker 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

使用 div 使链接居中

 .button {
    padding:1em;
    text-align: center;
    display:inline-block;
    text-decoration: none !important;
    margin:0 auto;

    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}

.container{
  width: 100%;
  text-align: center;
}

 <div class="container">
  <a href="#" class="button blue">Apply Now</a>
</div>

原文由 Pablo Salcedo T. 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

使用 文本对齐：居中； 在父元素上居中对齐其中的所有子元素。它们（子元素）不必是相同的块级元素。您的问题担心您不想通过在 a 标签上使用 display:block 来占用父 div 的全部空间。

您不必这样做，即使您在 a 标签上指定了 display:inline-block 并将其包装在带有 text-align: center 的父级中； ，它将解决您的任务。

或者，您可以使用 margin-left:25% 左右，以防上述答案不符合您的需要。

如果您需要更多帮助，请随时输入代码。

谢谢，

亚曼

原文由 YAMAN 发布，翻译遵循 CC BY-SA 3.0 许可协议