CSS 변수를 CSS를 사용하여 이미지의 가운데에 맞 춥니 다.

Question

Javascript를 사용하여 기본적인 문제를 해결했습니다. 지금은 숫자가 화면에 인쇄되는 것보다 내 결과가 더 좋게 보이기를 바랍니다. 특정 결과가 표시되면 다양한 이미지가 표시됩니다. 하나의 특별한 결과에 대해 'x'를 사용하면 이미지의 중앙에 숫자를 표시하고 싶습니다. 배경 이미지가있는 div에 결과를 삽입하려고했지만 이미지의 가운데에 'x'를 가운데에 맞출 수 없습니다. 이 일을 할 수있는 방법이 있습니까? 이 문제에 대한 도움이나 적어도 올바른 방향으로 지적 된 점에 감사드립니다.

또한

http://jsfiddle.net/codemesoftly/yo5Lt92t/ (팝업 상자에서 취소를 클릭합니다. 그것은 코드로 바로 이동합니다. 죄송합니다 제가 잘못을 한 경우. 처음이를 사용.)를 JSfiddle을 만들어

var userChoice = prompt("Pick a number between 50 and 100"); 

for (x=1; x <= userChoice; x++){ 
    if(x % 3 == 0){ 
     document.write("<ul><img src='http://dtc-wsuv.org/rgrover14/pingpong/left.png'></ul>") 
    } 
    if(x % 5 == 0){ 
     document.write("<ul><img src='http://dtc-wsuv.org/rgrover14/pingpong/right.png'></ul>") 
    } 
    if((x % 3 != 0) && (x % 5 != 0)){ 
     document.write("<div id='ball'><ul>" + x + "</ul></div>") 
    } 
} 

#ball { 
    background-image: url('http://dtc-wsuv.org/rgrover14/pingpong/ball.png'); 
    background-repeat: none; 
    height: 96px; 
    width:96px; 
} 

ul { 
    margin-top: 5px; 
} 

Answer 1

당신은 이런 식으로 뭔가를 시도 할 수 있습니다 :

var userChoice = 4; //prompt("Pick a number between 50 and 100"); 

for (x=1; x <= userChoice; x++){ 
    if(x % 3 == 0){ 
     var div = document.createElement('div'); 
     div.className = 'ball'; 
     div.textContent = x; 
     div.style.textAlign="center"; 
     div.style.verticalAlign='middle'; 
     div.style.display='table-cell'; 
     document.body.appendChild(div); 
    } 
} 


.ball { 
    background-image: url("http://dtc-wsuv.org/rgrover14/pingpong/ball.png"); 
    background-repeat: none; 
    height: 96px; 
    width:96px; 
}