Question

我正在使用基本的Jquery动画功能来尝试学习它。到目前为止似乎很简单，但我遇到的问题是我希望措辞在我所拥有的容器中水平/垂直对齐。

我尝试将Jquery中的着陆点设置为50％，但这显然是在50％位置开始div。现在，如果我将它设为40％，例如，这可能适用于一个屏幕尺寸，而不是另一个屏幕尺寸。现在，通常我会调整其他屏幕类型的媒体查询，但我不确定它如何与Jquery中定义的着陆目标一起使用。

有谁知道如何使用Jquery完成此操作并更改css以使其位于同一位置而不管屏幕大小？

＆＃13;

$(function() {
    $("#text_div").animate(
        {left : "50%"}, 500, function() {}
    );
});

＆＃13;

#container {
	margin: 20px 10%;
	height: 500px;
	border: 1px solid black;
	position: relative;
	top: 70px;
}
#text_div {
    max-width: 100%;
    height: 50px;
    position: relative;
    left: 0;
	top: 40%;
	clear: both;
	font-size: 3em;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="container">
	<div id="text_div">My writing</div>
</div>

＆＃13;

Answer 1

$(function() {
  $("#text_div").animate({
    left: "0"
  }, 500, function() {});
});

#container {
  margin: 20px 10%;
  height: 500px;
  border: 1px solid black;
  position: relative;
  top: 70px;
  display: flex;
  justify-content: center;
}
#text_div {
  max-width: 100%;
  height: 50px;
  position: relative;
  left: -40%;
  top: 40%;
  clear: both;
  font-size: 3em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="container">
  <div id="text_div">My writing</div>
</div>

我使用CSS3 flexbox将文本对齐到中心。

Answer 2

您实际上可以计算div执行数学运算的容器的宽度，并设置left的值。它将始终独立于设备屏幕尺寸

HTML

<div id="container">
    <div id="text_div">My writing Here</div>
</div>

CSS

#container {
    height: 500px;
    border: 1px solid black;
    position: relative;
    top: 70px;
  margin:auto;
  width:500px;

}
#text_div {
    position: absolute;
    width:auto;
      top: 50%;
      font-size: 3em;
}

JS

$(function() {
 var a = ($("#container").width())/2- ($("#text_div").width())/2
  $("#text_div").animate(
        {left : a}, 500, function() {}
    );
});

DEMO JSFIDDLE

文本将始终以水平为中心，您可以执行相同操作以使其垂直居中

希望这会有所帮助

在所有设备上获取动画文本着陆点是相同的

2 个答案: