从一个按钮点击输出的文本居中

Question

所以我是新开发的web开发人员（非常新），我有一个小型项目可以开展工作。用户点击一个按钮（网页上的所有内容都已居中，包括按钮），并且按钮返回一些文本。这是非常相似的代码

function myFunction() { 
 
    document.getElementById("demo").innerHTML = "Hello World"; 
 
}

<p>Click the button to trigger a function that will output "Hello 
 
World" in a p element with id="demo".</p> 
 

 
<button onclick="myFunction()">Click me</button> 
 
<p id="demo"></p>

我所试图做的是有输出（你好世界）在页面上居中为好。然而，在我的原始代码中，输出是一组单词（一个句子）。我想了解如何将其集中。

对不起，如果这没有格式正确，我也是新的stackoverflow。任何帮助，将不胜感激。谢谢！

Answer 1

使用text-align:center

function myFunction() { 
 
    document.getElementById("demo").innerHTML = "Hello World"; 
 
}

#demo { 
 
    text-align:center; 
 
}

<p>Click the button to trigger a function that will output "Hello 
 
World" in a p element with id="demo".</p> 
 

 
<button onclick="myFunction()">Click me</button> 
 

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