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

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

javascript html css

Javascript 无法将div与%宽度或高度正确对齐？,javascript,html,css,alignment,Javascript,Html,Css,Alignment,我无法正确对齐页面上的元素。我这里有一个活生生的例子 div“answer”应该覆盖在img“ball”中的三角形上。问题是，我也希望它看起来正确居中，即使窗口大小不同。如果我对图像和div使用像素宽度/高度值，这将更容易实现，但由于我使用的是百分比，我的div“answer”在“ball”中没有正确居中。请帮助：( #球{ 宽度：自动；身高：50%；显示：块；保证金：0自动； } #答复{ 宽度：5%；背景色：红色；文本对齐：居中；位置：绝对位置；保证金：0自动；利润率最高：

我无法正确对齐页面上的元素。我这里有一个活生生的例子

div“answer”应该覆盖在img“ball”中的三角形上。问题是，我也希望它看起来正确居中，即使窗口大小不同。如果我对图像和div使用像素宽度/高度值，这将更容易实现，但由于我使用的是百分比，我的div“answer”在“ball”中没有正确居中。请帮助：(


#球{
宽度：自动；
身高：50%；
显示：块；
保证金：0自动；
}
#答复{
宽度：5%；
背景色：红色；
文本对齐：居中；
位置：绝对位置；
保证金：0自动；
利润率最高：6%；
左：0；
右：0；
}
文本区{
宽度：600px；
高度：100px；
显示：块；
保证金：0自动；
}
钮扣{
宽度：600px；
高度：50px；
显示：块；
保证金：0自动；
}
h1{
字体大小：4.2米；
文本对齐：居中；
}
魔术8球
是的
摇
函数getAnswer（）{
var answers=[“这是肯定的。”，
“确实如此。”，
“毫无疑问。”，
“当然可以。”，
“你可以信赖它。”，
“在我看来，是的。”，
“很可能。”，
“前景良好。”，
“是的。”，
“符号指向是。”，
“回复模糊，再试一次。”，
“以后再问。”，
“最好现在不要告诉你。”，
“现在无法预测。”，
“集中精神再问一次。”，
“别指望了。”，
“我的回答是否定的。”，
“我的消息来源说没有。”，
“前景不太好。”，
“非常可疑。”]
var randomAnswer=答案[Math.floor（Math.random（）*answers.length）]；
document.getElementById（'answer'）。innerHTML=randomAnswer；
}

您可以同时放置图像（

#ball

）和答案（

#answer

）在容器

div

中，给它

位置：relative；

，然后使用

位置：absolute；

定位元素

我添加了一个容器，将其位置设置为relative，并将#ball and#answer设置为absolute，但仍然存在问题。经过一段时间的研究，我发现你的建议实际上是正确的这就是答案。谢谢你给我指出了正确的方向。

<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>