Question

我的标题中有一个元素从js文件中获取数据。

我试图将这个元素集中在我的页面中，但我所做的一切似乎都有效。

我尝试了margin-left：auto和margin-right：auto但仍然没有居中。

元素代码是：

<a href="http://[ip]/tunein/tranceilfm.pls" id="cc_strinfo_song_tranceilfm" class="cc_streaminfo" style="margin: 0px; display: block; ">Loading...</a>

http://tranceil.fm

（菜单下方框架中的蓝色歌曲信息）

有什么想法吗？

Answer 1

这应该这样做（使用父容器中的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>

或者只是将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>

Fiddle

Answer 2

尝试将您的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>

Answer 3

左右使用保证金百分比。有关更多详细信息，请查看以下教程： http://www.w3.org/Style/Examples/007/center.en.html

Answer 4

要在CSS中居中，请确保父元素包含position: relative，以及要将position: absolute和left: 50%以及margin-left: -width/2置于中心的元素。这是水平居中元素的基本思路。要垂直居中，您可以使用相同的技术，但使用top: 50%和margin-top: -height/2，或者如果它只是文本，则将line-height设置为等于容器元素的高度。

Answer 5

尝试为元素添加宽度，如下所示：

#cc_strinfo_song_tranceilfm {
width: 90%;
clear: both;
margin: auto;
}

Answer 6

display: inline-block;
text-align: center; 
margin-left: 50%; 
margin-right: 50%; 
overflow: visible;

居中<a> element</a>

6 个答案: