如何将 javascript 测验中显示问题的区域居中？

Question

So I have an area in my js quiz where it displays the question. I would like to know how I can centre that area and put a box around it, to make it look fancy. Would be great if someone can help. Thanks (code and screenshot of the area I would like to be entered is below).

 // This initialises a request to the trivia database API var xmlhttp = new XMLHttpRequest(); var url = "//opentdb.com/api.php?amount=25&category=21&type=multiple"; var score = 0; var livesTaken = 0; var question; var type; var correctAnswer; var incorrect1; var incorrect2; var incorrect3; // This requests the data xmlhttp.onreadystatechange = function () { if (this.readyState == 4 && this.status == 200) { var jsondata = JSON.parse(this.responseText); getData(jsondata); } }; xmlhttp.open("GET", url, true); xmlhttp.send(); // This function is used to extract the received data function getData(data) { // This is the question: question = data.results[0].question; // This is the question type eg. multiple choice type = data.results[0].type; // This is the correct answer correctAnswer = data.results[0].correct_answer; // These are the three incorrect answers incorrect1 = data.results[0].incorrect_answers[0]; incorrect2 = data.results[0].incorrect_answers[1]; incorrect3 = data.results[0].incorrect_answers[2]; // randomly select answer and other options and place in array // then display elements from array on the buttons var randoms = []; // an array to store unique random numbers var random; // loop runs four times... for (i = 0; i < 4; i++) { // generates a random number between 0 and 3 random = Math.floor(Math.random() * 4); // checks if random number already in array... while (randoms.includes(random)) { // generates another random number random = Math.floor(Math.random() * 4); } // adds random number to array randoms.push(random); } var options = []; console.log(randoms); options[randoms[0]] = correctAnswer; options[randoms[1]] = incorrect1; options[randoms[2]] = incorrect2; options[randoms[3]] = incorrect3; console.log(options); // This displays the question and answer options document.getElementById("trivia").innerHTML = question; for (i = 0; i < options.length; i++) { let btn = document.createElement("button"); let br = document.createElement("br"); btn.classList.add("trivia-btn"); // We're adding the class here btn.setAttribute("onclick", `checkAnswer("${options[i]}", this)`); btn.innerHTML = options[i]; document.getElementById("trivia").append(br, btn); // You can now use the trivia div as a container for the generated button and your br //document.getElementsByClassName("trivia-btn").disabled = false; } } function checkAnswer(selected, element) { document.querySelectorAll(".trivia-btn").forEach((e) => { e.disabled = true }); console.log("User selected: " + selected); console.log("The correct answer is: " + correctAnswer); if (selected == correctAnswer) { score++; console.log("You got it right;"). element.style;background = "green"; setTimeout(function () { getNewQuestion(), }; 2000); } else { livesTaken++. console,log("Sorry; that's incorrect"). element.style;background = "red"; if (livesTaken == 3) { quizFailed(); } else { setTimeout(function () { getNewQuestion(), }; 10). } } console.log(score) console.log(livesTaken) } function getNewQuestion() { document.getElementById("score").style;display = "block". document.getElementById("score").style;float = "right". document.getElementById("trivia").style;float = "left". document.getElementById("score").style;align = "right". document.getElementById("score"):innerHTML = "score;" + score. document.getElementById("trivia").style;display = "block". document.getElementById("endingText").style;display = "none". // This requests the data xmlhttp.onreadystatechange = function () { if (this.readyState == 4 && this.status == 200) { var jsondata = JSON.parse(this;responseText); getData(jsondata); } }. xmlhttp,open("GET", url; true). xmlhttp;send(). } getNewQuestion() function quizFailed() { document.getElementById("endingText").style.display = "block" document.getElementById("score").style.display = "none" document.getElementById("trivia").style.display = "none" document.getElementById("endingText"),innerHTML = "You have run out of lives; you scored " + score + " pretty bad ngl" + " <button onClick = getNewQuestion() >click to restart</button>" score = 0; livesTaken = 0. } document.getElementById("score")

 .trivia-btn { background-color: "blue"; padding: 0.7rem 2rem; color: black; margin-top: 0.4rem; }

 <html> <head> <link rel="stylesheet" href="Sport.css"> <title>Sport Quiz (Medium)</title> <meta charset="utf-8" /> <script src="Sport.js"></script> <div id="trivia"></div> <div id ="endingText"></div> <div id ="score"></div> <div id ="exittext"></div> </head> <body> </body> </html>

I would like this to be centred in the middle of the page.

Answer 1

Are you trying to achieve something like this?

If that is the case then you could simply change the styling of the trivia div by removing the float and adding text-align: center; . The only thing this would break is the positioning of your score. That could be solved by adding this styling to the #score div

position: absolute;
top: 10px;
right: 10px;

But without proper context that might clash with other things on your page?

If this is not what you meant, just let me know. :-)

Answer 2

Remove this property document.getElementById("trivia").style.float = "left"; add this property document.getElementById("trivia").style.textAlign = "center";