Html div 中的 <a> 标签居中
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/42065348/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Center <a> tag in div
提问by Nazar Abubaker
Currently having an issue with my button. I want to be able to center my 'a' tag but at the moment it will only stick to the left side. I have tried using "display:block" but this will make my button take up the full width of any div it's been put in.
目前我的按钮有问题。我希望能够将我的“a”标签居中，但目前它只会粘在左侧。我曾尝试使用“display:block”，但这会使我的按钮占据它所放入的任何 div 的整个宽度。
HTML:
HTML：
<a href="#" class="button blue">Apply Now</a>
CSS:
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;
}
回答by Pablo Salcedo T.
Use a div to center the link
使用 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>回答by YAMAN
Use the text-align: center;on a parent element to center align all the child elements inside it. They(child elements) do not have to be block level elements for the same. Your question has the concern that you do not want to take up the full space of the parent div by using display:blockon your atag.
使用text-align:center; 在父元素上居中对齐其中的所有子元素。它们（子元素）不必是相同的块级元素。您的问题担心您不想通过在a标签上使用display:block来占用父 div 的全部空间。
You don't have to, even if you specify display:inline-blockon your atag and wrap it inside a parent with text-align: center;, it will solve your task.
您不必这样做，即使您在a标签上指定display:inline-block并使用text-align: center;将其包装在父级中；，它将解决您的任务。
Alternatively, you can use margin-left:25% or so, in case the above answer does not suit your need.
或者，您可以使用 margin-left:25% 左右，以防上述答案不适合您的需要。
Feel free to drop in the code in case you need more help on this.
如果您需要更多帮助，请随意放入代码。
Thanks,
Yaman
谢谢，
亚曼
