title: Vertically aligning elements with CSS
body: <p>I have an element that's 60px tall that has other elements like an image and a couple of spans inside of it and I'm having trouble getting them to align vertically inside the 60px high element. Here's the mockup and CSS:</p>
  
  <pre><code>&lt;div class="member"&gt;
      &lt;img src="images/pic.png" alt="John Smiths's Profile Picture" class="pic"&gt;
      &lt;span class="name"&gt;&lt;a href=""&gt;John Smith&lt;/a&gt;&lt;/span&gt;
      &lt;span class="skills"&gt;PHP, MySQL, Javascript, C#, Java&lt;/span&gt;
  &lt;/div&gt;
  
  #sidebar .member {
      height: 60px;
      margin-bottom: 10px;
      vertical-align: center;
  }
  
  #sidebar .member .name {
      font-size: 15px;
      font-weight: bold;
  }
  
  #sidebar .member .pic {
      width: 50px;
      height: 50px;
      border-radius: 50%;
      float: left;
      margin-right: 10px;
  }
  
  #sidebar .member .skills {
      display: block;
      font-size: 12px;
      overflow: hidden;
  }
  </code></pre>
  
  <p>I've put it up on jsfiddle: <a href="http://jsfiddle.net/CYFyx/2/" rel="nofollow noreferrer">http://jsfiddle.net/CYFyx/2/</a></p>
  
  <p>As you can see, the elements within the <code>.member</code> element push to the top. I need them vertically aligned like so:</p>
  
  <p><img src="https://i.stack.imgur.com/pHFsx.png" alt="enter image description here"></p>
  
  <p>Already tried <code>vertical-align: middle;</code> but with no luck.</p>