div 내에서 div에 상대적인 이미지의 위치 지정

Question

시간을 표시하는 페이지를 만들려고합니다. 내가 사용하고있는 글꼴의 ':'는 추악하기 때문에 이미지로 바꾸고 싶습니다. 그러나 시간이 9:59에서 10:00으로 시간이 갈 때 간격 문제가 있습니다.

.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 

Answer 1

당신은 정말 그런 위치와 함께 저글링을하고 싶지 않은 : 여기 내 코드의 일부이다.

는 당신은 방금이 .imagedisplay: 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> 

그런 다음, 단지 적절한 스팬에서 현재 시간의 시간/분을 설정합니다.
물론 필요한 경우 몇 초 후에 추가 할 수 있습니다.

그러나, 다른 옵션은 콜론을 위해, 다른 글꼴을 표시하는 <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 :)

또는를 @Paulie_D의 suggestion에서 :

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 :)