将动态文本置于CSS中心

我从我的Icecast服务器收到歌曲标题，并且总是根据播放列表进行更改。将动态文本置于CSS中心

显然有些标题比其他标题长，反之亦然。

我试图将文本居中放在那个盒子里，所以它总是适合在中间，不管标题的长度。

我该如何做到这一点？

The player

的DIV + CSS：

.now_playing div { 
    white-space:nowrap; 
    font-size:13px; 
    line-height:24px; 
    position: relative; 
    min-height: 30px; 
    padding-left: 100px; 
    text-align: center; 
    right: 36px; 
}

锚CSS：

.now_playing a { 
    font-family: HelveticaNeue-Light, "Helvetica Neue Light", "Helvetica Neue", sans-serif; 
    font-size: 12px; 
    color: #fff; 
    text-decoration: none; 
    position: absolute; 
    top: 50%; left: 0; 
    width: 90px; 
    height: 30px; 
    margin-top: -15px; 

}

来源

2013-07-26 TonalDev

只需从标记中移除绝对位置即可。 – imperfectinfinity

你试过了.now_playing {margin：0 auto; }而不是左：0 – Tdelang

您可以套用这个规则

.now_playing a { 
    display: block; 
    width: 100%; 
}

并从.now_playing div选择器中删除padding-left: 100px;。

来源

2013-07-26 12:01:06

但是它跨越了整个宽度，我想他只是希望文本是可点击的，即一个标记居中在div？ – imperfectinfinity

是的，我认为歌曲标题跨越整个宽度。所以用短标题歌曲，用户将很容易在歌曲之间切换。 –

你的解决方案工作...我试图将文本居中作为歌曲标题的变化，但它太长了......使用你的规则，并降低字体大小似乎解决了这个问题，在5分钟内接受错误 – TonalDev

对于文本使用：

text-align:center;

对于div的使用：

margin: 0px auto;

See Fiddle

编辑：加0像素保证金。在定位之前正确清除所有边距

来源

2013-07-26 12:03:50 hunterc

Shouldn它是保证金：0汽车;？ – imperfectinfinity

将动态文本置于CSS中心

回答

相关问题