Flexbox：将所有内容集中在一条线上

Question

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

我试图用尽可能简单的标记来保持最小化，但是我很难将所有内容垂直对中在一条线上。

我做错了什么？

这是代码：

＆＃13;

＆＃13;

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
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

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

Answer 1

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

但是，flex项目的内容仍在块格式化上下文中。

因此，将flex项目放入具有居中的弹性容器中：

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

revised fiddle

在此处详细了解 flex格式上下文的范围：https://stackoverflow.com/a/37844240/3597276