Question

所以我正在尝试进行测验，在测验页面上，如果用户点击“开始”按钮，则会发生jQuery动画，并且在动画上会显示一些文本。

问题是，只要文本可以填充动画的宽度，第一行上的文本仅在动画发生时居中。但是如果文本足够长，那么在它进入第二行之后，它就会自动居中。

如何修复我的代码，以便即使文本足够小以仅适合一行，它也将始终居中？

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%;
}

Answer 1

你可以将width: 100%添加到#tt元素中，你应该好好去！请参阅以下jsbin获取结果：http://jsbin.com/sezadoxura/1/edit?html,css,js,output

文本在jQuery中居中，仅在第一个后面的行上

1 个答案: