0

私は、子供がキーを押すかマウスをクリックするたびに、画面がランダムな色と文字を生成して表示するこの小さなゲームを作成しました。動物のフラッシュカードも追加することにしました。問題は、中央に浮かんでいる div ボックスで、いまいましい画像を垂直方向に揃えることができないように見えることです。何か案は？

私が何をしようとしているのかについてのアイデアが必要な場合は、動物を除いたライブバージョンをここで見ることができます - http://64-b.it

<html>
  <link rel="stylesheet" type="text/css" href="style.css" />
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
  </script>
  <script type="text/javascript">
    var alphabet = new Array("A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z","a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o", "p", "q", "r", "s", "t", "u", "v", "w", "x", "y", "z", "1", "2", "3", "4", "5", "6", "7", "8", "9", "0");
    function getNum() {
        return "#" + Math.round(Math.random() * (16777215 - 0) + 0).toString(16);
    }
    function getLetter() {
        var ranNum = Math.round(Math.random() * (101 - 0) + 0);
        if(ranNum < 61){
            return alphabet[ranNum];
        }else{
            return "<img src='images/1.jpg' width='480px' />";
        }
    }

    function doStuff(){
        document.bgColor=getNum();
        document.getElementById('middle').innerHTML=getLetter();
    }

    $(window).on('click touchstart', function(){
        doStuff();
    });

    $(window).keydown(function(){
        doStuff();
    });

  </script>
  <body oncontextmenu="return false">
    <div id="middle">
    </div>
  </body>
</html>

そしてCSS：

#middle {
    border-radius: 50px;
    font-weight: 500;
    text-align: center;
    font-family: consolas;
    font-size: 500px;
    border: solid 20px black;
    position: absolute;
    left: 50%;
    top: 50%;
    background-color: #fff;
    z-index: 100;
    height: 590px;
    margin-top: -295px;
    width: 490px;
    margin-left: -245px;
    display: table-cell;
    vertical-align: middle;
}
4

2 に答える 2