如何在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

尝试在p标记上设置一个包含text-align: center;

编辑

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

您可以在CSS中定位#demo （用于文本对齐），也可以添加包含正确样式的类align-center 。

我建议后者，因为变得更加可重用，而您不能在同一页面上重复使用id

Answer 2

您正在使用JavaScript的事实对这个问题并不重要。 我之所以提到它，是因为标题为“如何在JavaScript函数中居中放置文本”，以及您试图居中包含JavaScript代码的实际脚本元素。

您希望将碰巧由JavaScript控制的元素的内容居中，但答案仅是CSS。

正如Ryuu的答案所提到的， text-align: center可以完成（您猜对了）文本和其他内联级别内容的工作 。

你不应该使用过时 center标记。

如果你把它应用到正确的元素和元素的宽度您尝试使用利润率将围绕一些 。 但是，“某物”是元素，而不是元素的内容。

换句话说，可以使用margin来对齐框，而不是框内的东西。

示例1：将元素居中，但文本仍左对齐。

实施例2：中心元素和它的行内的内容。

 .margin-example1 { width: 200px; background-color: #ddd; /* shorthand for margin: 0 auto 0 auto, which is shorthand for specifying each side individually */ margin: 0 auto; } .margin-example2 { width: 200px; background-color: #aaccee; margin: 0 auto; /* we still need this to get the desired behavior */ text-align: center; } 

 <div class="margin-example1">Example 1</div> <div class="margin-example2">Example 2</div> 

那么文本输入呢？ 浏览器通常将输入的样式设置为display:inline-block 。 这意味着我们可以将某些内容居中放置（示例1和2），但是要将它们放置在它们的容器中居中，我们需要更改为display:block （示例3）， 或者因为它们本身是内联元素，所以我们可以设置text-align在父容器上（示例4）， 另请参见 。

 .example1 { width: 100%; text-align: center; } .example2 { width: 200px; text-align: center; } .example3 { display: block; width: 200px; text-align: center; margin: 0 auto; } .example4 { width: 200px; text-align: center; } .example4-parent { text-align: center; } 

 <div> <input type="text" value="Example 1" class="example1"> </div> <div> <input type="text" value="Example 2" class="example2"> </div> <div> <input type="text" value="Example 3" class="example3"> </div> <div class="example4-parent"> <input type="text" value="Example 4" class="example4"> </div> 

CSS的布局可能很复杂，但是基础并不难。

请注意，我稍微简化了我的说明/定义（准备就绪后，您可以阅读有关格式化模型的所有信息）。