Centring an icon between text and another icon-CodePudding

I'm trying to get an icon (the play arrow with the ring around it) in the centre of the screen, in between the title ('Random Episodes') and the other icon (the monitor with the in it).

I have tried too many combinations to remember, let alone list here. If you look at the code snippet below, which is just the header section of the page, you can see what I mean. (The upside down 'T' is just there to mark the centre.) If you remove the /* */ in the #add_show_icon tag in the style section you will see what I want it to look like (as long as your screen size is greater than 590px).
Unfortunately, as you can see, the method I used to get it to look right was to, basically, just increase the width of the icon to match the width of the title (246.3px); this is obviously not a good final solution.

Any help with this would be appreciated as, although it is just for a personal project, I'm hopping it might be a good portfolio/'example of my work' type of project (after a bit... ok, a lot, of tidying up).

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>header test</title>

  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material Icons">

</head>

<body>
  <header id="header">
    <h1>Random Episodes</h1>
    <div  onclick="open_random_show_and_episode()">
      <i >autorenew</i>
      <i >play_arrow</i>
    </div>
    <i id="add_show_icon"  >add_to_queue</i>
  </header>
  <div id=center_marker>T</div>
</body>

<style>
   :root {
    --all-shows-bg-color: #444
  }
  
  body {
    background-color: dimgrey;
    margin: 0px;
  }
  
  #header {
    display: flex;
    justify-content: space-between;
    background: black;
    color: white;
    padding-left: 10px;
    padding-right: 10px;
  }
  
  .completely_random_outer {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .completely_random_outer .play_icon {
    position: absolute;
    font-size: 250%;
  }
  
  .completely_random_outer .button_icons {
    opacity: 1;
  }
  
  #add_show_icon {
    opacity: 1;
    /*
    width: 246.3px; 
    display: flex; 
    justify-content: flex-end; 
    */
  }
  
  .button_icons {
    opacity: 0;
    cursor: pointer;
    font-size: 470%;
    z-index: 1;
  }
  
  #center_marker {
    display: flex;
    justify-content: center;
    font-size: 500%;
    font-family: monospace;
    transform: scale(-1);
  }
</style>

</html>

Edit for clarification:
I have tried using justify-content: space-between; The problem with is is that it just equalizes the space between the elements, end to end. As the text is wider then the icon on the other side, it pushes the center icon over a bit, and thus of center for the page as a whole.

problem, center icon is off-center

desired look, having to bodge it by increasing the width of the icon

SOLVED! by @Timor-Kodal
Finished look! Thanks for the help Timor!

<header id="header">
    <div id="container">
        <div > 
            <h1>Random Episodes</h1>
        </div>
        <div >
            <div  onclick="open_random_show_and_episode()">
                <i >autorenew</i>
                <i >play_arrow</i>
            </div>
        </div>
        <div >
            <i id="add_show_icon"  >
                add_to_queue
            </i>
        </div>
    </div>
</header>

    #container {
        display: flex;
    }
    .child {
        flex: 1;
        display: flex;
        justify-content: center;
    }

    .child:first-child > h1 { 
        margin-right: auto; 
    }

    .child:last-child  > i { 
        margin-left: auto;  
    }

CodePudding user response：

Does this help?

.flex-container {
  display: flex;
}
.child {
  flex: 1;
  display: flex;
  justify-content: center;
}

.child:first-child > span { margin-right: auto; }

.child:last-child  > span { margin-left: auto;  }

<div >
  <div ><span>short</span></div>
  <div ><span>centered content</span></div>
  <div ><span>a very very long text section on the right side </span></div>
</div>

CodePudding user response：

I would suggest to use display:flex like this:

.flex-container {
    display: flex;
    justify-content: space-between;
}

<div >
    <div >
        left
    </div>
    <div >
        center
    </div>
    <div >
        right
    </div>
</div>