在 div 中居中 <a> 标签答案

【问题标题】：Center <a> tag in div在 div 中居中 <a> 标签
【发布时间】：2017-02-06 10:21:32
【问题描述】：

目前我的按钮有问题。我希望能够将我的“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;
}

【问题讨论】：

在 div 上应用 css 以实现居中对齐并根据需要提供宽度
文本对齐中心应该应用于父元素。 @MHamzaJaved，这是一些糟糕的建议 - 第一个没有任何区别，第二个会开始让你的 CSS 成为维护的噩梦
你需要在周围的容器上设置text-align: center;。这不是一个非常有用的问题，因为这显然缺乏 OP 最基本的研究工作。

标签： html css button

【解决方案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>

【讨论】：

【解决方案2】：

在父元素上使用 text-align: center; 将其中的所有子元素居中对齐。它们（子元素）不必是相同的块级元素。您的问题是您不想通过在 a 标签上使用 display:block 来占用父 div 的全部空间。

您不必这样做，即使您在 a 标记上指定 display:inline-block 并使用 text-align 将其包装在父级中:center;，它会解决你的任务。

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

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

谢谢，
亚曼

【讨论】：

【解决方案3】：

我同意Yaman，我用的最简单的方法是一个

标签，只要把它放在你的链接之前和之后

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

【讨论】：

【解决方案4】：

问题很简单。只需在按钮之前和标签内添加一个段落标签，添加对齐方式。这应该工作

<p align="center">
              <a href="Student Voice\Student-Voice (Hello).html" title="Just A button" class="btn btn-default">Hi</a>

【讨论】：

【解决方案5】：

如果 text-align: center 不起作用，则可以在相应标签中添加样式标签并使用

调整内容：居中；

【讨论】：

您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。