CSS 居中 <a> 元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11811265/
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 an <a> element
提问by Trance84
I have an element in my header that is getting data from a js file.
我的标头中有一个元素从 js 文件中获取数据。
I'm trying to center that element in my page but all i do dosent seem to work.
我试图在我的页面中将该元素居中，但我所做的一切似乎都不起作用。
I tried margin-left: auto and margin-right: auto but still is not centering.
我尝试了 margin-left: auto 和 margin-right: auto 但仍然没有居中。
The element code is:
元素代码为：
<a href="http://[ip]/tunein/tranceilfm.pls" id="cc_strinfo_song_tranceilfm" class="cc_streaminfo" style="margin: 0px; display: block; ">Loading...</a>
(the blue song info in the frame below the menu)
（菜单下方框中的蓝色歌曲信息）
Any thoughts?
有什么想法吗？
回答by Chris Clower
This should do it (center the link using text-align: centerin the parent container):
这应该这样做（text-align: center在父容器中使用链接居中）：
<div style="margin: 0 auto; text-align: center">
<a href="http://94.23.250.14:2199/tunein/tranceilfm.pls"
id="cc_strinfo_song_tranceilfm" class="cc_streaminfo"
style="margin: 0px; display:block;">Loading...</a>
</div>
Or simply add text-align: centerto the element itself:
或者简单地添加text-align: center到元素本身：
<a href="http://94.23.250.14:2199/tunein/tranceilfm.pls"
id="cc_strinfo_song_tranceilfm" class="cc_streaminfo"
style="margin: 0 auto; display:block; text-align: center">Loading...</a>
<!-- text-align: center directly on element -->
<a href="http://94.23.250.14:2199/tunein/tranceilfm.pls" id="cc_strinfo_song_tranceilfm" class="cc_streaminfo" style="margin: 0 auto; display:block; text-align: center">Loading...</a>
<!-- text-align: center on parent container -->
<div style="margin: 0 auto; text-align: center">
<a href="http://94.23.250.14:2199/tunein/tranceilfm.pls" id="cc_strinfo_song_tranceilfm" class="cc_streaminfo" style="margin: 0px; display:block;">Loading...</a>
</div>回答by trousyt
Try encapsulating your A element in a div and adding the CSS text-align property:
尝试将 A 元素封装在 div 中并添加 CSS text-align 属性：
<div style="text-align: center;">
<a href="http://94.23.250.14:2199/tunein/tranceilfm.pls" id="cc_strinfo_song_tranceilfm" class="cc_streaminfo">Loading...</a>
</div>
回答by trousyt
Use margin left and right with percentage. for more details look at the following tutorial: http://www.w3.org/Style/Examples/007/center.en.html
使用百分比的左右边距。有关更多详细信息，请查看以下教程：http: //www.w3.org/Style/Examples/007/center.en.html
回答by elclanrs
To center something in CSS, make sure the parent element has position: relative, and the element you want to center position: absoluteand left: 50%and margin-left: -width/2. That's the basic idea to center elements horizontally. To center vertically you can use the same technique but with top: 50%and margin-top: -height/2, or if it's just text then set the line-heightequal to the height of the container element.
在CSS中心了，要让父元素具有position: relative和元素要中心position: absolute和left: 50%和margin-left: -width/2。这是水平居中元素的基本思想。要垂直居中，您可以使用相同的技术，但使用top: 50%and margin-top: -height/2，或者如果它只是文本，则将 设置为line-height等于容器元素的高度。
回答by John Shepard
Try adding a width to your element like this:
尝试为您的元素添加宽度，如下所示：
#cc_strinfo_song_tranceilfm {
width: 90%;
clear: both;
margin: auto;
}
回答by DeFliGra
display: inline-block;
text-align: center;
margin-left: 50%;
margin-right: 50%;
overflow: visible;
