Question

我使用以下javascipt动态居中文本。

$(function() {
    $('.centre-dyn').css({
        'position' : 'absolute',
        'left' : '50%',
        'top' : '50%',
        'margin-left' : function() {return -$(this).outerWidth()/2},
        'margin-top' : function() {return -$(this).outerHeight()/2}
    });
});

但是，当我加载页面时，文本会在快速居中之前显示在未中心位置。如何使文本立即居中？

Answer 1

一个选项是在Aurora0001链接时，隐藏内容然后在JS运行后显示它。另一种是在html元素后面加上脚本标记。因此，您不需要准备好文档，它将立即运行：

<div class="centre-dyn"></div>
<script>
    $('.centre-dyn').css({
        'position' : 'absolute',
        'left' : '50%',
        'top' : '50%',
        'margin-left' : function() {return -$(this).outerWidth()/2},
        'margin-top' : function() {return -$(this).outerHeight()/2}
    });
</script>

如果jQuery是在头标记中加载的，或者在文档中此点之前的某处加载，那应该可以正常工作。但实际上我建议在CSS中这样做，而不是根据评论。

Answer 2

$(function(){})是简写或$(document).ready();您的代码在文档准备好后执行，而不是立即执行。正如其他人所提到的：使用css会更有意义，并且会立即集中。

例如：

.centre-dyn {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}

javascript执行前的延迟

2 个答案: