javascript - 使用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;
}