[英]Positioning of an image relative to a div within a div
I'm trying to create a page that displays the time. 我正在尝试创建一个显示时间的页面。 The ':' of the font i'm using is ugly so i want to replace it with an image.
我使用的字体的':'很丑陋,所以我想用图像替换它。 However when the time goes from example from 9:59 to 10:00 there are spacing issues.
但是,当时间从例如9:59变为10:00时,会出现间距问题。 Here is some of my code:
这是我的一些代码:
.image{
position: absolute;
width:30px; height:90px;
background-image: url("2dots.png");
background-repeat: no-repeat;
background-size:50%;margin-top:30px;
left:50%;
margin-left:-49px;
z-index:-1;
}
#time {
font-size: 99px;
width:300px;
left:50%;
margin-top:0px;
margin-left:-40px;
}
<div id="time"><div class="image"></div></div>
function updateClock() //updates time ever second inside #time every second
You really don't want to juggle with the positioning like that. 您真的不想摆弄这样的位置。
You should just set the .image
to display: inline-block
, then place it in between the hours and minutes: 您只需将
.image
设置为display: inline-block
,然后将其放置在小时和分钟之间:
.image{
width:30px;
height:90px;
background-image: url("2dots.png");
background-repeat: no-repeat;
background-size:50%;
}
<div id="time">
<span id="hours">12</span>
<div class="image"></div>
<span id="minutes">30</span>
</div>
Then, just set the current time's hours / minutes in the proper spans. 然后,只需在适当的跨度中设置当前时间的小时/分钟即可。
Of course, you can just add seconds after it, if you need. 当然,您可以根据需要添加几秒钟。
However, a different option would be to use a <span>
that displays a different font, just for the colon: 但是,另一种选择是使用
<span>
来显示不同的字体,仅用于冒号:
span{ font-family: Arial; } .colon{ font-family: Tahoma; }
<div id="time"> <span id="hours">12</span><span class="colon">:</span><span id="minutes">30</span> </div> (Normal colon : )
Or, from @Paulie_D 's suggestion : 或者,根据@Paulie_D的建议 :
span{ font-family: Arial; } #hours:after{ content: ':'; font-family: Tahoma; }
<div id="time"> <span id="hours">12</span><span id="minutes">30</span> </div> (Normal colon : )
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.