Morten Hjort Morten Hjort - 1 year ago 68
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="" alt="note">
<h4>A Head Full Of Dreams <span>- Coldplay</span></h4>

<div id="pc">
<a href="#"><img src="" alt="Click to go back"></a>
<a href="#"><img class="pp" src="" alt="Click to play"></a>
<!-- <a href="#"><img class="pp" src="" alt="Click to pause"></a> -->
<a href="#"><img src="" alt="Click to skip"></a>

<div id="pr">


<time>00:14 / 00:30</time>


And this is the SCSS:

background: #26272b;
display: flex;
align-items: center;

width: 1rem;


width: 2rem


What am I doing wrong?
This is the JSFiddle:

Answer Source

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:

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download