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

Question

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

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:

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

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

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

Please help!

Answer 1

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

Edit

Nesting your script in a div is meaningless as script tags don't get rendered

You can either target #demo in your css (for the text alignment) or add a class align-center that contains the correct style.

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

Answer 2

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.

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

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

You should not use the deprecated center tag.

Your attempt to use margins will center something if 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.

Example 2: centers the element and its inline-level contents.

 .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) or because they are inline-like elements themselves, we can set text-align on the parent container (Example 4), see also .

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

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