无法将 div 与 % 宽度或高度正确对齐？

Question

我无法正确对齐页面上的元素。我这里有一个活生生的例子..http://newbapps.com/8ball/

div 'answer' 应该覆盖在 img 'ball' 中的三角形上。问题是，即使 window 尺寸不同，我也希望它看起来也能正确居中。如果我为我的图像使用像素 width/height 值和 div，它会更容易完成，但由于我使用百分比，我的 div 'answer' 没有正确居中'ball' 内。请帮助:(

<html>
<head>
    <style>
        #ball {
            width: auto;
            height: 50%;
            display: block;
            margin: 0 auto;
        }

        #answer {
            width: 5%;
            background-color: red;
            text-align: center;
            position: absolute;
            margin: 0 auto;
            margin-top: 6%;
            left: 0;
            right: 0;
        }

        textarea {
            width: 600px;
            height: 100px;
            display: block;
            margin: 0 auto;
        }

        button {
            width: 600px;
            height: 50px;
            display: block;
            margin: 0 auto;
        }

        h1 {
            font-size: 4.2em;
            text-align: center;
        }

    </style>
</head>
<body>
<h1>Magic 8 Ball</h1>
<p id="answer">Yes.</p>
<img src="ball.png" id="ball">
<textarea></textarea>
<button onclick="getAnswer()">Shake</button>
<script>
    function getAnswer() {
        var answers = ["It is certain.",
                        "It is decidedly so.",
                        "Without a doubt.",
                        "Yes definitely.",
                        "You may rely on it.",
                        "As I see it, yes.",
                        "Most likely.",
                        "Outlook good.",
                        "Yes.",
                        "Signs point to yes.",
                        "Reply hazy try again.",
                        "Ask again later.",
                        "Better not tell you now.",
                        "Cannot predict now.",
                        "Concentrate and ask again.",
                        "Don't count on it.",
                        "My reply is no.",
                        "My sources say no.",
                        "Outlook not so good.",
                        "Very doubtful."]
        var randomAnswer = answers[Math.floor(Math.random() * answers.length)];
        document.getElementById('answer').innerHTML = randomAnswer;

    }
</script>
</body>
</html>

Answer 1

您可以将图像 (#ball) 和答案 (#answer) 放在容器 div 中，给它 position: relative; 然后使用 position: absolute;.

无法将 div 与 % 宽度或高度正确对齐？

Cannot align divs with % widths or heights properly?

html

javascript

css

alignment