javascript - 如何使 JavaScript 函数中的文本居中？

Question

我有一个 JavaScript 函数，它根据文本字段中的输入显示文本。当在文本字段中输入一个值时，我的程序将检查该值是否正确。如果它是正确的，我的程序会显示，“你是正确的!”如果不正确，我的程序会显示“再试一次!”

文本字段和按钮都在页面上水平居中，但我不知道如何居中“你是对的!”和“再试一次!”

我觉得我已经尝试了所有方法，但显然我还没有尝试过，因为我无法让它发挥作用。

这是我的 JavaScript 函数的代码:

<center><p>Can you remember how many books I listed at the bottom of the page?</p></center>

<center><input id="numb"></center>

<center><button type="button" onclick="myFunction()">Submit</button></center>

<p id="demo"></p>

<div class="jsFunction">
<script>
function myFunction() 
{
    var x, text;

    // Get the value of the input field with id="numb"
    x = document.getElementById("numb").value;

    // If x is Not a Number or less than five or greater than five
    if (isNaN(x) || x < 5 || x > 5) 
    {
        text = "Try again!";
    } 
    else 
    {
        text = "You are correct!";
    }
    document.getElementById("demo").innerHTML = text;
}
</script>
</div>

这是该函数的 CSS 代码:

.jsFunction
{
    margin-left: auto;
    margin-right: auto;
}

这个特定的 CSS 代码只是我为使文本在函数中居中所做的许多尝试之一。

这是一张图片的链接，可以向您展示我遇到的问题: http://i.stack.imgur.com/Hb01j.png

请帮忙!

Answer 1

尝试在包含 text-align: center;

的 p 标签上设置一个类

编辑

将 script 嵌套在 div 中是没有意义的，因为 script 标签不会被渲染

您可以在您的 css 中定位 #demo(用于文本对齐)或添加包含正确样式的类 align-center。

我会推荐后者，因为它变得更可重用，而你不能在同一页面上重用 id