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>​