Question

这是一段代码：

<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>标记，然后将对齐值移至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

进行一些更改：

从容器div中删除宽度
将text-align：center添加到父div
使容器div显示内联块

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

css：将文本换成div，所以div占用文本的长度

2 个答案: