Question

我已经为我的孩子写了这个小游戏，每当他按下一个键或点击鼠标时屏幕会生成随机颜色和字母并显示给他。我现在决定让它添加动物闪存卡。问题是我似乎无法将该死的图像垂直对齐在中间漂浮的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;
}

Answer 1

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

Answer 2

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

#middle img {
 position: relative;
 top: 10%;
}

使用CSS垂直对齐图像

2 个答案: