文本在jQuery中仅位于第一行之后的行的中心

Text is centered in jQuery on lines following the first one only

本文关键字：之后 于第一 jQuery 文本      更新时间：2024-04-25

所以我正在尝试做一个测试，在测试页面上，如果用户单击"开始"按钮，那么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%;
}

您可以将width: 100%添加到#tt元素中，应该可以开始了！有关结果，请参见以下jsbin：http://jsbin.com/sezadoxura/1/edit?html，css，js，输出

相关文章：