How to align and center 3 divs without affecting middle div

Question

i am making a game score card, and i want to align 3 divs in same line but the score always stays in the center of the page regardless how long the name of the teams are.

i tried many things but nothing got me results i wanted, if you can help please do, thanks in advance.

                    team alpha (logo) 0-0 (logo) team beta
           very long team name (logo) 0-0 (logo) another team

---

{% for match in matches %}
        <div class="match">
            <div class="home">
                {{match.home_name}} <img src="{{match.home_logo}}">
            </div>
            <div class="score">
                {{match.home_score}} : {{match.away_score}} 
            </div>
            <div class="away">
                <img src="{{match.away_logo}}"> 
                {{match.away_name}}
            </div>
        </div>
{% endfor %}

Answer 1

As Mortiz stated, you can use css flexbox, see example below.

.match {
  display: flex;
  justify-content: center;
    align-items: center;
  align-content: center;
}

.score { 
 width: 50px;
 text-align: center;
}

.home, .away {
  flex: 1;
  display: flex;
  flex: 1;
  align-items: center;
  margin-bottom: 10px;
}

.home {
    justify-content: flex-end;
}

/* not question related */
img {
  margin: 0 5px;
}

<div class="match">
    <div class="home">
        Brazil <img src="https://placehold.it/30x30">
    </div>
    <div class="score">
        0 : 1
    </div>
    <div class="away">
        <img src="https://placehold.it/30x30"> 
        The Netherlands
    </div>
</div>

<div class="match">
    <div class="home">
        USA <img src="https://placehold.it/30x30">
    </div>
    <div class="score">
        0 : 1
    </div>
    <div class="away">
        <img src="https://placehold.it/30x30"> 
        Japan
    </div>
</div>

<div class="match">
    <div class="home">
        United Kingdom <img src="https://placehold.it/30x30">
    </div>
    <div class="score">
        2 : 1
    </div>
    <div class="away">
        <img src="https://placehold.it/30x30"> 
        Germany
    </div>
</div>

Answer 2

You can use the flex grow to achieve this:

. match {
  display: flex;
}

.home {
  flex-grow: 3;
}

.score {
  flex-grow: 1;
}

.away {
  flex-grow: 3;
}