我正在使用以下;但边距几乎没有text-align:center;那么近似，无论如何，我可以切换text-align: center;以发生动画过渡，直到达到类似于以下所示的text-align: center;的点。将动画过渡到文字对齐：中心
if ($(".resource-section").hasClass("resource-section--expanded")) {
$(".resources__header h2").animate({"marginLeft": "40%"}, "slow");
}
您可以使用定心技术，使您可以水平居中的任何元素。
其可仅使用CSS动画效果
.test {
position: absolute;
transform: translateX(0%);
left: 0%;
animation: center 2s infinite;
}
@keyframes center {
0%, 10% {
transform: translateX(0%);
left: 0%;
}
90%, 100% {
transform: translateX(-50%);
left: 50%;
}
}<h1 class="test">TEST</h1>从我的理解，如果你想使用text-align:center财产这样的事可能是对您有所帮助，但text-align财产不能动画
$(function(){
$('.resources_header h2').click(function(){
$(this).toggleClass('align-center');
});
});.align-center{
text-align: center;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="resources_header">
<h2>HEADER</h2>
</div>
</div>这个问题是动画，所以如果你想要实现的是从左到中的动画，那么为什么不呢：
$(function(){
$('.resources_header h2').click(function(){
var windowHalfWidth = $(window).width()/2;
$(this).css('position','absolute');
var elemHalfWidth = $(this).width()/2;
var left = windowHalfWidth - elemHalfWidth;
$(this).animate({
marginLeft: left
},"slow",function(){
$(this).css('position','static');
});
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="resources_header">
<h2>HEADER</h2>
</div>
</div>你可以动画使用margin-leftcenter对齐这样
var h1 = $('h1').width();
var parent = $('.container').width();
$('h1').animate({'margin-left':(parent/2-h1/2)}, 1500);.container {
border: 1px solid black;
height: 100px;
}
h1 {
display: inline-block;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<h1>Text</h1>
</div>
http://stackoverflow.com/questions/6173327/animate-text-alignment-using-jquery – void
的可能重复号。我真的不喜欢用jQuery模仿文本对齐属性，但实际上使用它。 –
我不认为您可以为文本对齐属性设置动画效果，但使用宽度或左/右属性+过渡来模拟它非常简单。此外，保证金可以是真正准确的B/C，你可以测量文本的长度，然后从剩余价值减去其中的一半：50％ –