Codeacademy的岩石，紙，剪刀遊戲

我想弄清楚如何集中（垂直和水平）我的innerHTML記住內容的長度。這是我的HTML和CSS。Codeacademy的岩石，紙，剪刀遊戲

<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); 
}

來源

2016-09-09 Mladen Bogomirov

是網站是在CSS定心的東西非常有用：http://howtocenterincss.com/ –

您可以通過多種方法實現此目的。

選項1：您可以通過使用切緣陰性的居中DIV：

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

選項2：您可以使用更少的支持CSS變換：翻譯

.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%); 
}

我建議選項1，因爲它得到了更好的支持。但是，嘿，無論漂浮你的船;）

來源

2016-09-09 09:10:46 cpalinckx

謝謝你這麼多。這幫助了我很多。但是，有沒有辦法讓所有文本都爲中心。我的意思是當劇本顯示「結果是平局！」或「恭喜！」它往左走一點。 –

你總是可以嘗試添加文本對齊：中心; – cpalinckx

哇......對不起，這些愚蠢的問題。並再次感謝您的幫助。定位確實讓我感到困擾。 :( –

text-align: center;在容器選擇器應該做的伎倆。

您還可以使用 'Flexbox的' 以水平和垂直中心：

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

Useful guide for flex

來源

2016-09-09 10:27:48 sagarsys

Codeacademy的岩石，紙，剪刀遊戲

回答

相關問題