Codeacademy's Rock, Papier, Schere Spiel

Ich versuche herauszufinden, wie man (vertikal und horizontal) meine innerHTML in Anbetracht der Länge des th-Inhalts zentrieren. Hier sind meine HTML und CSS.Codeacademy's Rock, Papier, Schere Spiel

<body> 
    <div class="container"> 
      <p id="demo"></p> 
      <script> 
       var userChoice = prompt("Do you choose rock, paper or scissors?"); 
       var computerChoice = Math.random(); 
       if (computerChoice < 0.34) { 
        computerChoice = "rock"; 
       } else if(computerChoice <= 0.67) { 
        computerChoice = "paper"; 
       } else { 
        computerChoice = "scissors"; 
       } document.getElementById("demo").innerHTML = "Computer: " + computerChoice; 

       var compare = function(choice1, choice2) { 
        if(choice1 === choice2) { 
         document.getElementById("demo").innerHTML = "The result is a tie!"; 
        } else if (choice1 === "rock") { 
         if (choice2 === "scissors") { 
          document.getElementById("demo").innerHTML = "Congratulatioins, you win!"; 
         } else { 
          document.getElementById("dmeo").innerHTML = "Sorry, the computer shows paper. You lost!"; 
         } 
        } else if (choice1 === "paper") { 
         if (choice2 === "rock") { 
          document.getElementById("demo").innerHTML = "Congratulatioins, you win!"; 
         } else { 
          document.getElementById("demo").innerHTML = "Sorry, the computer shows scissors. You lost!"; 
         } 
        } else if (choice1 === "scissors") { 
         if (choice2 === "paper") { 
          document.getElementById("demo").innerHTML = "Congratulatioins, you win!"; 
         } else { 
          document.getElementById("demo").innerHTML = "Sorry, the computer shows rock. You lost!"; 
         } 
        } 
       } 

       compare (userChoice, computerChoice); 
      </script> 

.container { 
    width: 50%; 
    margin: 0 auto; 
    padding: 10px; 
} 

body { 
    background-image: url(images/bg-img.jpg); 
    background-repeat: no-repeat; 
    background-attachment: fixed; 
    margin: 0; 
} 

#demo { 

    font-family: Impact; 
    font-size: 40px; 
    color: #cddc39; 
    text-shadow: 2px 4px 3px rgba(106, 209, 25, 0.62); 
}

Quelle

2016-09-09 Mladen Bogomirov

Seite ist ziemlich nützlich für Dinge in css Zentrierung: http://howtocenterincss.com/ –

Sie können dies mit mehreren Methoden erreichen.

Option 1: Sie können die div mit der Verwendung von negativen Margen Zentrum:

.container { 
    position: absolute; 
    left: 50%; 
    top: 50%; 
    width: 50%; 
    margin-left: -25%; 
    margin-right: -25%; 
}

Option 2: Sie haben die weniger CSS verwenden können, unterstützt verwandeln: übersetzen

.container { 
    position: absolute; 
    left: 50%; 
    top: 50%; 
    width: 50%; 

    -ms-transform: translate(-50%,-50%); /* IE 9 */ 
    -webkit-transform: translate(-50%,-50%); /* Safari */ 
    transform: translate(-50%,-50%); 
}

Ich schlage vor, Option 1 weil es viel besser unterstützt wird. Aber hey, was auch immer Ihr Boot schwimmt;)

Quelle

2016-09-09 09:10:46 cpalinckx

Thank dich so sehr. Das hat mir sehr geholfen. Gibt es jedoch eine Möglichkeit, den gesamten Text zentriert zu machen? Was ich meine ist, wenn das Skript zeigt "Das Ergebnis ist ein Unentschieden!" oder "Herzlichen Glückwunsch!" es geht ein bisschen nach links. –

Sie können immer versuchen, text-align: center; – cpalinckx

Wow ... Sorry für die dummen Fragen. Und nochmals vielen Dank für die Hilfe. Positionierung nervt mich wirklich. :( –

text-align: center; innerhalb der Container-Selektor sollte den Trick tun.

Sie auch 'Flexbox' können sowohl horizontal als auch vertikal zentriert:

.container { 
    width: 50%; 
    margin: 0 auto; 
    padding: 10px; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
}

Useful guide for flex

Quelle

2016-09-09 10:27:48 sagarsys

Codeacademy's Rock, Papier, Schere Spiel

Antwort

Verwandte Themen