使用css将JS变量移动到图像中心

Question

我使用Javascript解决了一个基本问题。我现在希望我的结果看起来比只是将数字打印到屏幕上更好。当显示特定结果时，我会显示各种图像。对于一个特定的结果，虽然'x'我希望数字显示在图像的中心。我尝试将结果插入带有背景图像的div，但无法将'x'居中放置到图像的中心。有没有办法做到这一点？我感谢任何帮助或至少指出了正确的方向。

而且（用这个点击取消就弹出一个对话框，它会为你带来直接的代码。很抱歉，如果我做错了什么，还是第一次。）创建的jsfiddle

http://jsfiddle.net/codemesoftly/yo5Lt92t/

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; 
}