如何在 JavaScript 函数中居中文本？

How to Center Text in a JavaScript Function?

提问by Jaydelay

I have a JavaScript function that displays text based on input in a text field. When a value is entered into the text field, my program will check to see if the value is correct. If it is correct, my program displays, "You are correct!" and if it is incorrect, my program displays, "Try again!"

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

The text field and button are both centered horizontally on the page, but I cannot figure out how to center the "You are correct!" and "Try again!"

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

I feel like I have tried everything, but obviously I haven't, considering I can't get it to work.

我觉得我已经尝试了一切，但显然我还没有，考虑到我无法让它工作。

Here is the code for my JavaScript function:

这是我的 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>

Here is the CSS code for the function:

这是该函数的 CSS 代码：

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

This specific CSS code is only one of many, many attempts I have made at centering the text in the function.

这个特定的 CSS 代码只是我为使函数中的文本居中而进行的众多尝试之一。

Here is a link to a picture that will show you the problem I am having:http://i.stack.imgur.com/Hb01j.png

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

Please help!

请帮忙！

采纳答案by Ryuu

Try setting a class on the ptag that contains text-align: center;

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

Edit

编辑

Nesting your scriptin a divis meaningless as scripttags don't get rendered

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

You can either target #demoin your css (for the text alignment) or add a class align-centerthat contains the correct style.

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

I would recommend the latter as the becomes more reusable, whereas you can't reuse an idon the same page

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

回答by Tim Medora

The fact that you are using JavaScript isn't important to this question. I mention it because of the title "How to Center Text in a JavaScript Function" and your attempt to center the actual script element containing your JavaScript code.

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

You want to center the contents of an element that happens to be controlled by JavaScript, but the answer is CSS-only.

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

As Ryuu's answer mentions, text-align: centerwill do the job for (you guessed it) text and other inline-level content.

正如 Ryuu 的回答所提到的，text-align: center将为（你猜对了） text 和其他内联级内容完成这项工作。

You should notuse the deprecatedcentertag.

你应该不使用过时center的标签。

Your attempt to use margins will center somethingif you apply it to the correct element and the element has a width. That "something" is the element, however, not the contents of the element.

如果您将边距应用于正确的元素并且该元素具有宽度，那么您尝试使用边距将使某些内容居中。然而，“某物”是元素，而不是元素的内容。

In other words, margin can be used to align the box, not the stuff within the box.

换句话说，边距可用于对齐框，而不是框内的东西。

Example 1:centers the element, but the text is still left-aligned.

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

Example 2:centers the element andits inline-level contents.

实施例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>

So how about a text input? Browsers usually style inputs as display:inline-block. This means we can center something inside them (Examples 1 & 2), but to center them within their container we need to change to display:block(Example 3) orbecause they are inline-like elements themselves, we can set text-alignon the parent container (Example 4), see also.

那么文本输入呢？浏览器通常将输入样式设置为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>

Layout in CSS can be complicated, but the basics aren't hard.

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

Note that I have over-simplified my explanation/definitions a bit (you can read all about the formatting modelwhen you are ready).

请注意，我已经稍微简化了我的解释/定义（您可以在准备好后阅读有关格式化模型的所有信息）。