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

Question

我正在尝试仅使用 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/

Answer 1

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

但是，弹性项目的内容仍然在块格式化上下文。

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

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

revised fiddle

在此处了解有关 flex 格式化上下文范围的更多信息：

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

Flexbox: centering everything on one line

html

css

centering

flexbox