css

css.css

@@ -5,10 +5,7 @@
 
 }
 
-h1{
-    text-align: center;
 
-}
 #hvezda{
     background-image: url("stars.jpg");
 }
@@ -17,3 +14,9 @@ h1{
     position: fixed;
     opacity: 0;
 }
+.zarovnani{
+    position:absolute;
+    left: 50%;
+    top: 50%;
+    
+}

index.html

@@ -14,31 +14,37 @@
             
         </div>
         <div class="section" id="zacatek">
-            
-                
-                    <h1>Ahoj</h1>
-                
-                
+            <div class="zarovnani">
+                <h1>Ahoj</h1>
+            </div>   
             
         </div>
         <div class="section" id="cerna">
             
+            <div class="zarovnani">
                 <h1 style="color: aliceblue;">Ahoj</h1>
+            </div>   
             
        </div>
     
         <div class="section" id="hvezda">
             
-                <h1 style="color: aliceblue;">Ahoj</h1>
+            <div class="zarovnani">
+               <h1 style="color: aliceblue;">Ahoj</h1>
+            </div>   
                 
             
         </div>
         <div class="section" id="odkrytí">
-            <h1 style="color: aliceblue;">afff</h1>
+            <div class="zarovnani">
+                <h1 style="color: aliceblue;">Ahoj</h1>
+            </div>   
             
         </div>
         <div class="section" id="rotace">
-                <h1 style="color: aliceblue;">afff</h1>
+            <div class="zarovnani">
+                <h1 style="color: aliceblue;">Ahoj</h1>
+            </div>   
             
             
         </div>
@@ -55,13 +61,15 @@
             if (value >= 0 && value <= 255) {
                 document.body.style.backgroundColor = "rgb(" + value + "," + value + "," + value + ")";     
                 }
-            let hvezdaa = document.querySelector('#hvezda');
+
+            let hvezda = document.querySelector('#hvezda');
             let hvezda_rect = hvezda.getBoundingClientRect();
             let opacity =(hvezda_rect.top / hvezda_rect.height);
             if (opacity >= 0 && opacity <= 1) {
                 console.log("Opacity: " +opacity);  
                 document.body.style.backgroundImage = "rgb(" + opacity + "," + opacity + "," + opacity + ")";     
                 }
+
             let odkrytí = document.querySelector('#odkrytí');
             let odkrytí_rect = odkrytí.getBoundingClientRect();
             let zeme_img = document.querySelector(".zeme01");