如何在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的布局可能很復雜，但是基礎並不難。

請注意，我稍微簡化了我的說明/定義（准備就緒后，您可以閱讀有關格式化模型的所有信息）。