Halten Sie beide Text und laden Symbol zentriert

-1

Dies ist meine loading HTML-Website, aber die Sache ist, dass ich sowohl das Laden Symbol und den Text zentriert bleiben wollen, unabhängig von der Größe der Fenster. Ich habe alles versucht, was ich weiß, aber es bleibt immer noch nicht zentriert.Halten Sie beide Text und laden Symbol zentriert

Wenn euch ein Beispiel dieser Seite sehen wollen: Example

Bitte und Danke

<html> 

<body> 

<style> 
body{ 
background-color: #1B2B36; 
} 
.sk-folding-cube { 
width: 40px; 
margin: 0 auto; 
height: 40px; 
position:relative; 
top:300px; 

-webkit-transform: rotateZ(45deg); 
     transform: rotateZ(45deg); 
} 

.sk-folding-cube .sk-cube { 
float: left; 
width: 50%; 
height: 50%; 
margin: 0 auto; 

position: relative; 
-webkit-transform: scale(1.1); 
    -ms-transform: scale(1.1); 
     transform: scale(1.1); 
} 
.sk-folding-cube .sk-cube:before { 
content: ''; 
position: absolute; 
top: 0; 
margin: 0 auto; 
left: 0; 
width: 100%; 
height: 100%; 
background-color: white; 
-webkit-animation: sk-foldCubeAngle 2.4s infinite linear both; 
     animation: sk-foldCubeAngle 2.4s infinite linear both; 
-webkit-transform-origin: 100% 100%; 
    -ms-transform-origin: 100% 100%; 
     transform-origin: 100% 100%; 
} 
    .sk-folding-cube .sk-cube2 { 
    -webkit-transform: scale(1.1) rotateZ(90deg); 
     transform: scale(1.1) rotateZ(90deg); 
    } 
    .sk-folding-cube .sk-cube3 { 
    -webkit-transform: scale(1.1) rotateZ(180deg); 
     transform: scale(1.1) rotateZ(180deg); 
    } 
    .sk-folding-cube .sk-cube4 { 
    -webkit-transform: scale(1.1) rotateZ(270deg); 
     transform: scale(1.1) rotateZ(270deg); 
    } 
    .sk-folding-cube .sk-cube2:before { 
    -webkit-animation-delay: 0.3s; 
     animation-delay: 0.3s; 
    } 
    .sk-folding-cube .sk-cube3:before { 
    -webkit-animation-delay: 0.6s; 
     animation-delay: 0.6s; 
    } 
    .sk-folding-cube .sk-cube4:before { 
    -webkit-animation-delay: 0.9s; 
     animation-delay: 0.9s; 
    } 
    @-webkit-keyframes sk-foldCubeAngle { 
    0%, 10% { 
    -webkit-transform: perspective(140px) rotateX(-180deg); 
     transform: perspective(140px) rotateX(-180deg); 
    opacity: 0; 
    } 25%, 75% { 
    -webkit-transform: perspective(140px) rotateX(0deg); 
     transform: perspective(140px) rotateX(0deg); 
    opacity: 1; 
    } 90%, 100% { 
    -webkit-transform: perspective(140px) rotateY(180deg); 
     transform: perspective(140px) rotateY(180deg); 
     opacity: 0; 
     } 
     } 

    @keyframes sk-foldCubeAngle { 
     0%, 10% { 
     -webkit-transform: perspective(140px) rotateX(-180deg); 
     transform: perspective(140px) rotateX(-180deg); 
    opacity: 0; 
    } 25%, 75% { 
    -webkit-transform: perspective(140px) rotateX(0deg); 
     transform: perspective(140px) rotateX(0deg); 
    opacity: 1; 
    } 90%, 100% { 
    -webkit-transform: perspective(140px) rotateY(180deg); 
     transform: perspective(140px) rotateY(180deg); 
    opacity: 0; 
    } 

    } 

    #coming{ 
    position: absolute; 
    left: 610px; 
    color: white; 
    }    
    </style> 
    <div class="sk-folding-cube"> 
    <div class="sk-cube1 sk-cube"></div> 
    <div class="sk-cube2 sk-cube"></div> 
    <div class="sk-cube4 sk-cube"></div> 
    <div class="sk-cube3 sk-cube"></div> 
    </div> 
    <h1 id="coming">Coming Soon!</h1> 

    </body> 
    <script> 
     setTimeout(function(){ 
     self.location = "main.html"; 
     }, 30000000000000000); 
    </script> 
    </html>

Quelle

2017-08-24 Div Raj

-1

Zunächst betrachten einen Schnipsel beim nächsten Mal machen und Ihre CSS und HTML trennen. Zweitens

#coming{ 
    text-align: center; 
    color: white; 
    }

ist das, was Sie suchen.

Hinweise zu Fragen finden Sie unter this.

Quelle

2017-08-24 03:28:49

Halten Sie beide Text und laden Symbol zentriert

Antwort

Verwandte Themen