Image not centered in div using flexbox

Question

I'm trying to put a row with three elements, leaving some padding between the screen border and the countries, and leave the image in the center of the screen. So far, this is a snippet of what I have:

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="skoreStyle.css">
    <title>Skore</title>
</head>

<body>
    <div class=columns>
        <div class="col col-1" id="RightName">SOLDATOVA</div>
        <div class="col col-2" id = LeftName>DROR Y B</div>
    </div>


    <div class=columns>
        <div class="col country-1">45</div>

        <div class="col country-2">0</div>

    </div>


    <div class=columns>
        <div class="score-1">9</div>

        <div class="round-clock">
            <div class="round">T1</div>
            <div class="clock">3:00</div>
        </div>

        <div class="score-2">8</div>
    </div>

    <div class=columns>
            <div class=country>RUS</div>
            <div class=logo> 
                <img src="res/icon.png"> </img>
             </div>
            <div class=country>ISR</div>
        </div>


    <script>
        require('electron').ipcRenderer.on('update', (event, msg) => {
            console.log(msg);
            document.getElementById("RightName").innerHTML = msg["RightName"];
            document.getElementById("LeftName").innerHTML = msg["LeftName"]; 
            document.getElementsByClassName("clock")[0].innerHTML = msg["Stopwatch"];
    });
    </script>


</body>
</html>

and the stylesheet

html{
    width: 100%;
    height:100%;
    background:black;
    font-family: Impact;
    margin: 0px;
}

.columns{
    display:flex;
    justify-content: space-between;

}


.col-1{
    display:flex;
    align-items: center;
    justify-content: center;

    width:50%;
    background: green;
    color: white;
    height: 25vh;
    font-size: calc(5vw + 5vh + 2.5vmin);
    min-width: 200px;
    min-height:100px;

}

.col-2{
    display:flex;
    align-items: center;
    justify-content: center;

    width:50%;
    color:white;
    background: red;
    height:25vh;
    font-size: calc(5vw + 5vh + 2.5vmin);
    min-width: 200px;
    min-height:100px;

}

.score-1 {
    display:flex;
    align-items:center;
    justify-content: center;
    color:white;
    background:black;
    height:40vh;
    width:30%;
    min-width: 200px;
    min-height:100px;
    border:20px solid white;
    font-size:calc(12vw + 12vh + 2.5vmin);
}

.clock {
    display:flex;
    align-items:center;
    justify-content: center;
    vertical-align:middle;
    height:28vh;
    width:60vh;
    font-size: calc(8vw + 8vh + 2.5vmin);
    background:black;
    color:cadetblue;

}

.score-2 {
    display:flex;
    align-items:center;
    justify-content: center;
    color:white;
    background:black;
    height:40vh;
    width:30%;
    min-width: 200px;
    min-height:100px;
    border:20px solid white;
    font-size:calc(12vw + 12vh + 2.5vmin);
}


.round-clock {
    flex-wrap: wrap;
    flex-direction: column;
    border:20px solid white;
}

.round {
    display:flex;
    justify-content: center;
    align-items:center;
    color:white;
    background:navy;
    font-size:calc(2vw + 2vh + 2.5vmin);
}

.country{
    display:flex;
    justify-content: center;
    align-items:center;
    color:white;
    font-size:calc(4vw + 4vh + 2.5vmin);
    flex-direction: column;
    padding: 0.8vw 8vw 0.8vw 8vw;
}

.logo{
    display:flex;
    justify-content:center;
    align-items:center;
    flex-direction:column;
    width:6vw;
}

The problem I encounter is that the image is not centered, it's padded to the right, and I don't know why, because I used a similar approach to center the other rows and It work just fine. Someone could explain me this behaviour? Thanks

Edit: This is the image

The bottom logo is a little bit misplaced to the right

actually bootstrap 4 concept is very easy for you code. Thats why i asked. — Revti Shah, Dec 09 '19 at 12:07
You want to align the middle at the center element first then align the adjacent elements relative to it, Here's a [duplicate](https://stackoverflow.com/a/33856609/7148391) scroll down to **Center a flex item when adjacent items vary in size** — Rainbow, Dec 09 '19 at 12:19
i made changes. Please check. If any changes then let me know. — Revti Shah, Dec 09 '19 at 12:20

score 0 · Answer 1 · answered Dec 09 '19 at 12:19

Here is the code. Hope it will help you.If any changes then please let me know.

https://jsfiddle.net/xqto1wa5/1/

html{
    width: 100%;
    height:100%;
    background:black;
    font-family: Impact;
    margin: 0px;
}

.columns{
    display:flex;
    justify-content: space-between;

}


.col-1{
    display:flex;
    align-items: center;
    justify-content: center;

    width:50%;
    background: green;
    color: white;
    height: 25vh;
    font-size: calc(5vw + 5vh + 2.5vmin);
    min-width: 200px;
    min-height:100px;

}

.col-2{
    display:flex;
    align-items: center;
    justify-content: center;

    width:50%;
    color:white;
    background: red;
    height:25vh;
    font-size: calc(5vw + 5vh + 2.5vmin);
    min-width: 200px;
    min-height:100px;

}

.score-1 {
    display:flex;
    align-items:center;
    justify-content: center;
    color:white;
    background:black;
    height:40vh;
    width:30%;
    min-width: 200px;
    min-height:100px;
    border:20px solid white;
    font-size:calc(12vw + 12vh + 2.5vmin);
}

.clock {
   text-align:center;
    width:60vh;
    font-size: calc(8vw + 8vh + 2.5vmin);
    background:black;
    color:cadetblue;

}

.score-2 {
    display:flex;
    align-items:center;
    justify-content: center;
    color:white;
    background:black;
    height:40vh;
    width:30%;
    min-width: 200px;
    min-height:100px;
    border:20px solid white;
    font-size:calc(12vw + 12vh + 2.5vmin);
}


.round-clock {
    flex-wrap: wrap;
    flex-direction: column;
    border:20px solid white;
}

.round {
    display:flex;
    justify-content: center;
    align-items:center;
    color:white;
    background:navy;
    font-size:calc(2vw + 2vh + 2.5vmin);
}

.country{
    display:flex;
    justify-content: center;
    align-items:center;
    color:white;
    font-size:calc(4vw + 4vh + 2.5vmin);
    flex-direction: column;
    padding: 0.8vw 8vw 0.8vw 8vw;
}

<div class=columns>
        <div class="col col-1" id="RightName">SOLDATOVA</div>
        <div class="col col-2" id = LeftName>DROR Y B</div>
    </div>


    <div class=columns>
        <div class="col country-1">45</div>

        <div class="col country-2">0</div>

    </div>


    <div class=columns>
        <div class="score-1">9</div>

        <div class="round-clock">
            <div class="round">T1</div>
            <div class="clock">3:00</div>
        </div>

        <div class="score-2">8</div>
    </div>

    <div class=columns>
            <div class=country>RUS</div>
            <div class=logo> 
                <img src="https://dummyimage.com/150x100/ff00ff/000000.png"> </img>
             </div>
            <div class=country>ISR</div>
        </div>

score 0 · Answer 2 · answered Dec 09 '19 at 16:56

What worked finally was the following

.bottomColumn{
    display: flex;
    justify-content: flex-start; 
    position: relative;   
}

.countryLeft{
    justify-content: flex-start;  
    position: relative;    
    color:white;
    font-size:calc(4vw + 4vh + 2.5vmin);
    padding-left: calc(4vh + 7vw);
}

.countryRight{
    margin-left: auto;  
    flex: 0 1 auto;
    color:white;
    font-size:calc(4vw + 4vh + 2.5vmin);
    padding-right: calc(4vh + 7vw);
}

.logo{
    flex: 0 1 auto;
    position: absolute; 
    left: 50%;
    transform: translateX(-50%);
    padding-top: 6vh;
}

.logoImage{
    width:15vh;
    height:auto;
}

Centering with absoulte the logo and then moving around the left and right text

Image not centered in div using flexbox

2 Answers2