CSS：文本換行到div中的div需要文本

Question

這裏的長度是一個代碼：

Fiddle

<div id="main" style="border:1px solid red;"> 
<div id="child" style="background-color:#68c5e7; width:170px; margin:0 auto; font-size:30px; background-image:url(https://www.google.by/logos/2012/javelin-2012-sr.png); background-repeat : no-repeat;"> 
<span style="padding-left:116px;">9:58</span> 
</div> 
</div> 

的時間計算使用JavaScript這樣的字符串的長度可以在網頁後更改加載。如何修復背景＃68c5e7的長度，使其具有合適的長度（對應於img +文本的長度）。

同樣，您將9:58更改爲10:03，但背景顏色的長度未更改，但不適合。 還有一個要求：圖片+文字（文字不太長，總是不超過一個主div的長度）應該完全位於主div的中間。

Answer 1

只需添加所有的風格，以<span>標籤並取出asigned價值的width：

HTML標記：

<div id="main"> 
    <div id="child"> 
     <span> 123456</span> 
    </div> 
</div>​ 

CSS標記：

#main{ 
    border:1px solid red; 
} 

#child { 
    text-align: center; 
} 

span{ 
    /*width:190px; */ 
    padding-left:114px; 
    background-color:#24a5a5; 
    margin:0 auto; 
    font-size:30px; 
    background-image:url(https://www.google.by/logos/2012/javelin-2012-sr.png); 
    background-repeat: no-repeat; 
    white-space:nowrap; 
    position: relative; 
} 

檢查這個DEMO

Answer 2

做一些修改：

1. 從容器DIV
2. 添加文本對齊取出寬度：中心父DIV
3. 使容器DIV有inline-顯示器方框

jsFiddle example

HTML

<div id="main" style="border:1px solid red;text-align:center"> 
<div id="child" style="background-color:#24a5a5; font-size:30px; background-image:url(https://www.google.by/logos/2012/javelin-2012-sr.png); background-repeat : no-repeat;display:inline-block;"> 
    <span style="padding-left:114px;"> 12345678</span> 
</div> 
</div>​