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

Question

我在正确对齐页面上的元素时遇到问题。 我在这里有一个直播示例。.http://newbapps.com/8ball/

div“答案”应叠加在img“球”中的三角​​形上。 问题是，即使窗口大小不同，我也希望它居中显示。 如果我在图像和div上使用像素宽度/高度值，则更容易实现，但是由于我在使用百分比，因此div的“答案”未正确居中于“球”内。 请帮忙 ：（

<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;定位元素position: absolute; 。