0

I solved a basic problem using Javascript. I now want my results to look better than just having numbers being printed to the screen. I have various images displayed when certain results are shown. For one particular result though 'x' I want the number to be displayed in the center of an image. I tried inserting the result into a div with a background image, but am unable to center 'x' to the center of the image. Is there any way to do this? I appreciate any help in the matter or at least being pointed in the right direction.

Also created a JSfiddle

http://jsfiddle.net/codemesoftly/yo5Lt92t/ (click cancel on the pop up box. It will bring you straight to the code. Sorry if I did something wrong. First time using this.)

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;
}
Ryan113
  • 676
  • 1
  • 10
  • 27

1 Answers1

0

You can try something like this:

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;
}
Butterfly
  • 435
  • 6
  • 15
  • other ways to center text vertically, also with comments on compatibility with older browsers here: http://stackoverflow.com/questions/8865458/how-to-align-text-vertically-center-in-div-with-css – Butterfly Nov 25 '14 at 11:08
  • Thanks! This is what Jasmine must of felt like with Aladdin on the magic carpet. A whole new world! It worked great for what I was trying to do. Still have a lot to learn and this helped a lot. – Ryan113 Nov 26 '14 at 00:06