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