在文本和另一个图标之间居中一个图标

Question

我正在尝试在屏幕中央、标题 ('Random Episodes') 和另一个图标（带有+ 在里面）。

我试过太多的组合都记不住了，更别提在这里列出了。如果您查看下面的代码片段，它只是页面的 header 部分，您就会明白我的意思。（倒置的 'T' 只是用来标记中心。）如果你在样式部分的 #add_show_icon 标签中删除 /* */ 你会看到我想要的样子（只要您的屏幕尺寸大于 590px）。
不幸的是，如您所见，我用来让它看起来正确的方法基本上是增加图标的宽度以匹配标题的宽度 (246.3px)；这显然不是一个好的最终解决方案。

如有任何帮助，我们将不胜感激，因为尽管它只是针对个人项目，但我希望它可能是一个不错的作品集/'example of my work' 类型的项目（稍等一下......好吧，很多，整理）。

<!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 class="completely_random_outer" onclick="open_random_show_and_episode()">
      <i class="material-icons button_icons ">autorenew</i>
      <i class="material-icons button_icons play_icon">play_arrow</i>
    </div>
    <i id="add_show_icon" class="material-icons button_icons" >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>

编辑澄清：
我试过使用 justify-content: space-between; 的问题是它只是使元素之间的 space 端到端相等。由于文本比另一侧的图标宽，它会将中心图标推到一点，从而使整个页面居中。

problem, center icon is off-center

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

已解决！通过 @Timor-Kodal
Finished look! Thanks for the help Timor!

<header id="header">
    <div id="container">
        <div class="child"> 
            <h1>Random Episodes</h1>
        </div>
        <div class="child">
            <div class="completely_random_outer" onclick="open_random_show_and_episode()">
                <i class="material-icons button_icons ">autorenew</i>
                <i class="material-icons button_icons play_icon">play_arrow</i>
            </div>
        </div>
        <div class="child">
            <i id="add_show_icon" class="material-icons button_icons" >
                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;  
    }

Answer 1

我建议这样使用 display:flex：

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

<div class="flex-container">
    <div class="child">
        left
    </div>
    <div class="child">
        center
    </div>
    <div class="child">
        right
    </div>
</div>

Answer 2

这有帮助吗？

.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 class="flex-container">
  <div class="child"><span>short</span></div>
  <div class="child"><span>centered content</span></div>
  <div class="child"><span>a very very long text section on the right side </span></div>
</div>

在文本和另一个图标之间居中一个图标

Centring an icon between text and another icon

html

css

flexbox

icons

centering