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

0

而不是，display:table-cell;您vertical-align:middle;可以将 a 设置line-height equal为 div 的高度，这将使文本（单行）和图像垂直居中

于 2013-08-15T22:41:32.410 回答
-1

如果你设置这样的东西来欺骗它怎么办：

#middle img {
 position: relative;
 top: 10%;
}
于 2013-08-15T22:53:57.257 回答