1

I'm trying to recreate this layout with flexbox only:

enter image description here

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

What am I doing wrong?

This is the code: 

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>

This is the JSFiddle: https://jsfiddle.net/h1k8v16g/

Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
Morten Hjort
  • 992
  • 2
  • 14
  • 28

1 Answers1

2

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: https://stackoverflow.com/a/37844240/3597276

Community
  • 1
  • 1
Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701