Morten Hjort Morten Hjort - 10 days ago 11
CSS Question

Flexbox: centering everything on one line

I'm trying to recreate this with flexbox (no prefixes) only:

enter image description here

I'm trying to keep it as simple as possible with minimal markup, however I have a hard time vertically centering everything and put it into one line.

This is the code:

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


And this is the SCSS:
body{margin:0}

#p{
background: #26272b;
color:white;
display: flex;
align-items: center;
padding:1rem;
justify-content:space-between;

img{
width: 1rem;
}

#pc{

.pp{
width: 2rem
}
}

}


What am I doing wrong?
This is the JSFiddle: https://jsfiddle.net/h1k8v16g/

Answer

Your primary flex container is working to keep flex items vertically centered.

However, the content of the flex items is still in a block formatting context.

Therefore, make the flex items into flex containers with centering:

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

revised fiddle

Learn more about the scope of a flex formatting context here: http://stackoverflow.com/a/37844240/3597276