Html 如何使用 CSS 将链接居中
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17660458/
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
How to center a link using CSS
提问by Isaiah Young
I am very new and was messing around with some code ( just HTML and CSS ) But I can't get my link to center like my text? The id's are just for practice I know They aren't required.
我很新，正在处理一些代码（只是 HTML 和 CSS）但是我无法像我的文本一样将链接指向中心？id 仅用于练习，我知道它们不是必需的。
回答by seanxiaoxiao
I provided a solution with css. You could take a look at this link http://jsfiddle.net/qPAfK/
我用css提供了一个解决方案。你可以看看这个链接http://jsfiddle.net/qPAfK/
div {
width: 100px;
}
div a {
text-align: center;
display: block;
margin: 0 auto;
}
回答by sun
In your Case
在你的情况下
#W3link
{
width:100px; /*use your preferred width*/
margin-left:auto;
margin-right:auto;
}
Use Classif you want to use more than one time.
如果您想多次使用，请使用Class。
回答by jessebae
Link is an inline element. Bootstrap uses center-blockto change inline element display:
Link 是一个内联元素。Bootstrap 用于center-block更改内联元素显示：
.center-block {
display: block;
margin-right:auto;
margin-left:auto;
}
Yet this doesn't work when applied directly to link, such as:
然而，当直接应用于链接时，这不起作用，例如：
<a href="#" class="center-block">link</a>
It only works if I apply widthstyle. 20% works well in my page. This is approximate centering. I've tried text-centermany times with links and have never been able to make it work. What surprises me is that using display: blockalone doesn't work with margincentering. Widthhas to be added.
它只有在我应用width样式时才有效。20% 在我的页面中运行良好。这是近似居中。我已经尝试了text-center很多次链接，但始终无法使其正常工作。令我惊讶的是，display: block单独使用并不适用于margin居中。Width必须添加。
回答by Ed 42
This is how it worked for me:
这对我来说是这样的：
<div style="text-align:center"><a href="https://stackoverflow.com/"></a></div>
<div style="text-align:center"><a href="https://stackoverflow.com/"></a></div>
