HTML — Javascript, влияющий на положение изображения

Javascript, влияющий на положение изображения

У меня есть изображение и строка текста поверх синей рамки, все исчезает с помощью JavaScript. Если я не использую JS, я могу без проблем центрировать изображение. Но как только JS используется, изображение больше не центрируется. Тем не менее, строка текста делает. Почему это происходит?

Вот примеры кода:

 $("#box").velocity("fadeIn", { duration: 5500 }); $("#txt").velocity("fadeIn", { duration: 10500 }); $("#pic").velocity("fadeIn", { duration: 10500 }); 
 #box { width: 100%; height: 1000px; background-color: lightblue; } p { text-align: center; } img { width: 40%; display: block; margin: 0 auto; } 
 {amp}lt;!DOCTYPE html{amp}gt; {amp}lt;html{amp}gt; {amp}lt;head{amp}gt; {amp}lt;meta charset="UTF-8"{amp}gt; {amp}lt;link rel="stylesheet" href="cultura.css"{amp}gt; {amp}lt;/head{amp}gt; {amp}lt;body{amp}gt; {amp}lt;div id="box"{amp}gt; {amp}lt;img id="pic" src="pic.jpg"{amp}gt; {amp}lt;p id="txt"{amp}gt; a line of text {amp}lt;/p{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"{amp}gt;{amp}lt;/script{amp}gt; {amp}lt;script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js"{amp}gt;{amp}lt;/script{amp}gt; {amp}lt;script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.ui.min.js"{amp}gt;{amp}lt;/script{amp}gt; {amp}lt;script src="cultura.js"{amp}gt;{amp}lt;/script{amp}gt; {amp}lt;/body{amp}gt; {amp}lt;/html{amp}gt; 
Понравилась статья? Поделиться с друзьями:
JavaScript & TypeScript
Adblock
detector