將動態文本置於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中心

回答

相關問題