2016-08-17 12 views
-1

Я использую следующий javascipt для центра текста динамически.Задержка перед выполнением javascript

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

Однако, когда я загружаю страницу, текст перед ее центрированием появляется в нецентральном положении. Как я могу сделать текст сразу центром?

+0

Использование гибкого с чистого CSS вместо JS кода. – SLaks

+0

Почему бы не просто установить правила CSS для этого, а не использовать JavaScript? – j08691

+0

Почему вы не используете стиль css? – randominstanceOfLivingThing

ответ

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 вместо этого, согласно комментариям.

1

$(function(){}) является сокращением или $(document).ready(); Ваш код выполняется после того, как документ готов, а не сразу. Как говорили другие: использование css будет иметь больше смысла, а также сразу же будет сосредоточено.

Например:

.centre-dyn { 
position: absolute; 
left: 50%; 
top: 50%; 
transform: translate(-50%, -50%); 
} 
Смежные вопросы