Looking to create a quiz where clicking the Begin button triggers a jQuery animation, displaying text. The challenge arises when the centered text shifts alignment if it spans multiple lines during the animation.
The issue is ensuring that even single-line text remains centered throughout the animation. How can this code be modified to maintain centering regardless of text length?
HTML
<!DOCTYPE html>
<html>
<head>
<link href='http://fonts.googleapis.com/css?family=Indie+Flower' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="50.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
var div = $("#tgemp");
startAnimation();
function startAnimation(){
div.animate({height: "100%", width: "100%"}, 3000, "swing");
div.css("background-color", "#99FF66");
}
document.getElementById("tt").style.opacity = "1";
});
});
</script>
</head>
<div id = "tgemp">
<p id = "tt"> A walk on the beach may lead to contact with sand</p>
</div>
<body>
<h1>50 States Quiz</h1>
<div id="firstDiv" align="center">
<h2> Can you name all 50 states? </h2>
<p id = "timer"> 5:00 </p>
<button type="button" id = "time" onclick="Begin();"> Begin </button><br/><br/><br/><br/>
<input type="text" id = "tb" onInput="Verify()" enabled></input><br/><br/><br/>
</div><br/>
</body>
<center><img src="us.png" height = '50%' id = "img"></center>
</html>
CSS
body{
background-color: #ADD8E6;
background: -webkit-linear-gradient(left, rgba(255,90,90,1),rgba(114,188,212,1));
background: -o-linear-gradient(right, rgba(255,90,90,1),rgba(114,188,212,1));
background: -moz-linear-gradient(right, rgba(255,90,90,1),rgba(114,188,212,1));
background: linear-gradient(to right, rgba(255,90,90,1),rgba(114,188,212,1));
}
h1,h2,#timer{
font-family: 'Indie Flower',serif;
text-align: center;
color: white;
font-size: 325%;
}
h2,#timer{
font-size: 200%;
}
#time {
background: #65a9d7;
border: solid 0px #1e90ff;
border-radius: 50px;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
color: #ffffff;
font-size: 130%;
font-family: 'Indie Flower',serif;
padding: 5px 15px;
}
#time:hover {
background: #c42f2f;
}
#time:active {
background: #FF9200;
border: solid 0px #1e90ff;
border-radius: 50px;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
}
#time:focus{
outline:0 !important;
}
#tb {
background-color: #ADD8E6;
background: -webkit-linear-gradient(right, rgba(255,90,90,1),rgba(114,188,212,1));
background: -o-linear-gradient(left, rgba(255,90,90,1),rgba(114,188,212,1));
background: -moz-linear-gradient(left, rgba(255,90,90,1),rgba(114,188,212,1));
background: linear-gradient(to left, rgba(255,90,90,1),rgba(114,188,212,1));
border:3px solid #FF9200;
border-radius:10px;
height: 30px;
width: 200px;
text-align:center;
font-family: 'Indie Flower',serif;
color: white;
font-size: 125%;
outline:0 !important;
}
#tgemp{
font-family: 'Indie Flower',serif;
color: #99FF66;
width:0px;
height:0px;
position:absolute;
left:0px;
top:0px;
background-color:red;
}
#tt{
font-family: 'Indie Flower',serif;
color: white;
opacity:0;
position:absolute;
font-size: 400%;
text-align: center;
}
#tt:after{
content: "";
display: inline-block;
width: 100%;
}