Reputation: 1

Couldn't align images to center

I am working on a project where couldn't align images to center. Rock-paper-scissor image align issue where I couldn't align the images to center from where I take responses to display.

let userScore = 0;
let computerScore =0;
const userScore_span = document.getElementById("user-score");
const computerScore_span = document.getElementById("computer-score");
const scoreboard_div = document.querySelector(".score-board");
const result_div = document.querySelector(".result");
const rock_div = document.getElementById("r")
const paper_div = document.getElementById("p")
const scissor_div = document.getElementById("s")




function getComputerChoice(){
    const choices =['r','p','s'];
    const randomNumber = Math.floor(Math.random()*3);
    return choices[randomNumber];
}

function convertToWord(letter){
    if(letter =="r") return "rock"
    if(letter == "p") return "paper"
    return "scissor"
}

getComputerChoice();

function win(userChoice,computerChoice){
    userScore++;
    userScore_span.innerHTML = userScore;
    computerScore_span.innerHTML = computerScore;
    result_div.innerHTML = `${convertToWord(userChoice)} beats ${convertToWord(computerChoice)},you win`
    console.log("win " + userScore + ":" +computerScore);
}

function lose(userChoice,computerChoice){
    computerScore++; 
    userScore_span.innerHTML = userScore;
    computerScore_span.innerHTML = computerScore;
    result_div.innerHTML = `${convertToWord(userChoice)} beats ${convertToWord(computerChoice)},you loose`
    console.log("lose " + userScore + ":" +computerScore);
}
function draw(){
    console.log("draw");
}
function game(userChoice){
    const computerChoice = getComputerChoice();
    switch (userChoice + computerChoice){
        case "rs":
        case "sp":
        case "pr":
           win();
            break
        case "sr":
        case "ps":
        case "rp":
             lose();
             break
        case "rr":
        case "pp":
        case "ss":
            draw();
            break


    }

}



function main(){
rock_div.addEventListener('click',function(){
    game("r");
})

paper_div.addEventListener('click',function(){
    game("p");
})

scissor_div.addEventListener('click',function(){
    game("s");
})
}
main();

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body{
    background-color: darkcyan;
}
header
{
    background-color: whitesmoke;
    padding: 20px;
}
header > h1 {
    color:darkcyan;
    text-align: center; 
    font-family: Asap, sans-serif;
}
.score-board{
    margin: 20px auto;
    border: 3px solid white;
    border-radius: 10px;
    text-align: center;
    width:200px;
    color: azure;
    font-size: 46px;
    position: relative;
}

.badge {
    background: #50012e;
    color: white;
    font-size: 20px;
    padding: 2px 10px;
    font-family: Asap, sans-serif;
}
#user-label{
    position: absolute;
    top:15px;
    left: -25px;

}
#computer-label{
    position: absolute;
    top:15px;
    right: -25px;

}
.result{
    font-size: 70px;
    color: whitesmoke;
    display: flex;
    justify-content: center;

    
}
.result > p {
    text-align: center ;
    font-weight: bold;
    font-family: Asap, sans-serif;
    font-size: 20px;
}
.choices {
    margin: auto;
    text-align: center;
    display: inline-block;
    justify-content: center;
}
.choices{
    border: 4px solid cyan;
    border-radius: 50%;
    margin:0 20px;
    padding: 10px;
    transition: all 0.2s ease;;
   
    
}

.choices:hover{
    cursor: pointer;
    background: #242424  ;
}
#action {
    text-align: center;
    color: azure;
    font-weight: bold;
    font-size: 20px;
    margin-top: 20px;
    font-family: Arial, Helvetica, sans-serif;
}

<html>
       <head>
           <meta charset="utf-8">
           <title>
               "Rock Paper Scissors"
           </title>
           <link rel="stylesheet" href="styles.css"></link>
       </head>
                <body>
                    <header>
                       <h1> Rock , Paper , Scissors </h1>
                    </header>
                    <div class="score-board">
                            <div id = "user-label" class = "badge">user</div>
                            <div id = "computer-label" class = "badge">comp</div>
                            <span id ="user-score">0</span>:<span id ="computer-score">0</span>
                     </div>
      
                            <div class="result">
                                <p>Scissor cuts paper,you win.!</p>    
                            </div>
        
                            <div class="choices" id ="r">
                                <img src="assets/rock.PNG" alt="rock">
                            </div>

                            <div class="choices" id ="p">
                                <img src="assets/paper.PNG" alt="paper">
                            </div> 
        
                            <div class="choices" id ="s">
                                <img src="assets/Scissor.PNG" alt="scissor">
                            </div>
                            <p id="action">Make Your Move</p>
                            <script src="app.js" charset="utf-8"></script>
                          
                </body>

</html>

Image:

Upvotes: 0

Answers (3)

parisa mollazadeh

Reputation: 16

use flex display for "chooise" scss class and use align-content "center"

you set flex display for pare

Upvotes: 0

Prashant

Reputation: 752

Add all their images into one div and then apply css {text-align: center} to the newly added div.

<div class="new_div">
    <div class="choices" id ="r">
        <img src="assets/rock.PNG" alt="rock">
    </div>
    <div class="choices" id ="p">
        <img src="assets/paper.PNG" alt="paper">
    </div>
    <div class="choices" id ="s">
        <img src="assets/Scissor.PNG" alt="scissor">
    </div>
</div>

And apply CSS

.new_div{
    text-align: center;
}

Upvotes: 0

mounir

Reputation: 11

i think this solves your problem

let userScore = 0;
let computerScore =0;
const userScore_span = document.getElementById("user-score");
const computerScore_span = document.getElementById("computer-score");
const scoreboard_div = document.querySelector(".score-board");
const result_div = document.querySelector(".result");
const rock_div = document.getElementById("r")
const paper_div = document.getElementById("p")
const scissor_div = document.getElementById("s")




function getComputerChoice(){
    const choices =['r','p','s'];
    const randomNumber = Math.floor(Math.random()*3);
    return choices[randomNumber];
}

function convertToWord(letter){
    if(letter =="r") return "rock"
    if(letter == "p") return "paper"
    return "scissor"
}

getComputerChoice();

function win(userChoice,computerChoice){
    userScore++;
    userScore_span.innerHTML = userScore;
    computerScore_span.innerHTML = computerScore;
    result_div.innerHTML = `${convertToWord(userChoice)} beats ${convertToWord(computerChoice)},you win`
    console.log("win " + userScore + ":" +computerScore);
}

function lose(userChoice,computerChoice){
    computerScore++; 
    userScore_span.innerHTML = userScore;
    computerScore_span.innerHTML = computerScore;
    result_div.innerHTML = `${convertToWord(userChoice)} beats ${convertToWord(computerChoice)},you loose`
    console.log("lose " + userScore + ":" +computerScore);
}
function draw(){
    console.log("draw");
}
function game(userChoice){
    const computerChoice = getComputerChoice();
    switch (userChoice + computerChoice){
        case "rs":
        case "sp":
        case "pr":
           win();
            break
        case "sr":
        case "ps":
        case "rp":
             lose();
             break
        case "rr":
        case "pp":
        case "ss":
            draw();
            break


    }

}



function main(){
rock_div.addEventListener('click',function(){
    game("r");
})

paper_div.addEventListener('click',function(){
    game("p");
})

scissor_div.addEventListener('click',function(){
    game("s");
})
}
main();

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body{
    background-color: darkcyan;
}
header
{
    background-color: whitesmoke;
    padding: 20px;
}
header > h1 {
    color:darkcyan;
    text-align: center; 
    font-family: Asap, sans-serif;
}
.score-board{
    margin: 20px auto;
    border: 3px solid white;
    border-radius: 10px;
    text-align: center;
    width:200px;
    color: azure;
    font-size: 46px;
    position: relative;
}

.badge {
    background: #50012e;
    color: white;
    font-size: 20px;
    padding: 2px 10px;
    font-family: Asap, sans-serif;
}
#user-label{
    position: absolute;
    top:15px;
    left: -25px;

}
#computer-label{
    position: absolute;
    top:15px;
    right: -25px;

}
.result{
    font-size: 70px;
    color: whitesmoke;
    display: flex;
    justify-content: center;

    
}
.result > p {
    text-align: center ;
    font-weight: bold;
    font-family: Asap, sans-serif;
    font-size: 20px;
}
.choices {
    margin: auto;
    text-align: center;
    display: inline-block;
    justify-content: center;
}
.choices{
    border: 4px solid cyan;
    border-radius: 50%;
    margin:0 20px;
    padding: 10px;
    transition: all 0.2s ease;;
   
    
}

.choices:hover{
    cursor: pointer;
    background: #242424  ;
}
#action {
    text-align: center;
    color: azure;
    font-weight: bold;
    font-size: 20px;
    margin-top: 20px;
    font-family: Arial, Helvetica, sans-serif;
}

.choices-parent {
    display: flex;
    justify-content: center;
}

<html>
       <head>
           <meta charset="utf-8">
           <title>
               "Rock Paper Scissors"
           </title>
           <link rel="stylesheet" href="styles.css"></link>
       </head>
                <body>
                    <header>
                       <h1> Rock , Paper , Scissors </h1>
                    </header>
                    <div class="score-board">
                            <div id = "user-label" class = "badge">user</div>
                            <div id = "computer-label" class = "badge">comp</div>
                            <span id ="user-score">0</span>:<span id ="computer-score">0</span>
                     </div>
            
                            <div class="result">
                                <p>Scissor cuts paper,you win.!</p>    
                            </div>
                    <div class="choices-parent">
                            <div class="choices" id ="r">
                                <img src="assets/rock.PNG" alt="rock">
                            </div>

                            <div class="choices" id ="p">
                                <img src="assets/paper.PNG" alt="paper">
                            </div> 
        
                            <div class="choices" id ="s">
                                <img src="assets/Scissor.PNG" alt="scissor">
                            </div>
                    </div>
                            <p id="action">Make Your Move</p>
                            <script src="app.js" charset="utf-8"></script>
                          
                </body>

</html>

Upvotes: 1

Couldn&#39;t align images to center

Answers (3)

Related Questions

Couldn't align images to center