Flexbox的：</p> <p><a href="https://i.stack.imgur.com/cNyfk.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/cNyfk.png" alt="enter image description here"></a></p> <p>我试图保持尽可能简单，以最少的标记，但我：在一行

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

你的主挠性容器努力保持柔性物品垂直居中。

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

因此，使柔性物品进入Flex容器与定心：

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

revised fiddle

详细了解柔性格式化的内容这里的范围：https://stackoverflow.com/a/37844240/3597276