Flexbox：将所有内容集中在一行上答案

【问题标题】：Flexbox: centering everything on one lineFlexbox：将所有内容集中在一行上
【发布时间】：2016-11-30 23:33:57
【问题描述】：

我正在尝试仅使用 flexbox 重新创建此布局：

我试图以最少的标记使其尽可能简单，但是我很难将所有内容垂直居中放在一条线上。

我做错了什么？

这是代码：

body {
  margin: 0;
}
#p {
  background: #26272b;
  color: white;
  display: flex;
  align-items: center;
  padding: 1rem;
  justify-content: space-between;
}
img {
  width: 1rem;
}
.pp {
  width: 2rem
}

<div id="p">

  <div id="pl">
    <img src="http://mortenhjort.dk/synchub/imgs/beamed-note.svg" alt="note">
    <h4>A Head Full Of Dreams <span>- Coldplay</span></h4>
  </div>

  <div id="pc">
    <a href="#">
      <img src="http://mortenhjort.dk/synchub/imgs/previous.svg" alt="Click to go back">
    </a>
    <a href="#">
      <img class="pp" src="http://mortenhjort.dk/synchub/imgs/play.svg" alt="Click to play">
    </a>
    <!-- <a href="#"><img class="pp" src="http://mortenhjort.dk/synchub/imgs/pause.svg" alt="Click to pause"></a> -->
    <a href="#">
      <img src="http://mortenhjort.dk/synchub/imgs/next.svg" alt="Click to skip">
    </a>
  </div>

  <div id="pr"></div>

  <time>00:14 / 00:30</time>

  <div></div>

这是 JSFiddle：https://jsfiddle.net/h1k8v16g/

【问题讨论】：

标签： html css flexbox centering

【解决方案1】：

您的主要弹性容器正在努力保持弹性项目垂直居中。

然而，弹性项目的内容仍然在一个块格式化上下文中。

因此，将弹性项目制作成具有居中的弹性容器：

div { display: flex; align-items: center; }

revised fiddle

在此处了解有关 flex 格式化上下文的范围的更多信息：https://stackoverflow.com/a/37844240/3597276

【讨论】：

很棒的评论！谢谢！