How to set a div next to an image and center it vertically?

Question

I want to know how to place an image next to a div and center the div (progress bar) vertically?

What I want to do:

Here is my code for the progress bar:

<div class="progressbar">
  <div class="skill"><span>HTML 5</span></div>
</div>

.progressbar {
    background-color: black;
    border-radius: 25px;
    padding: 3px;
    width: 200px;
  }

.progressbar > div {
    background-color: #FDEE18;
    width: 175px;
    height: 20px;
    border-radius: 10px;
  }

  .skill span {
    padding-left: 10px;
  }

Answer 1

You can do it with display: table and display:table-cell; like this :

CSS

img { height: 60px;  display: table-cell;  }
#container { display: table;}
.container-progress { display: table-cell; vertical-align: middle; padding-left: 10px;}

HTML

<div id="container">
  <img src="http://lorempicsum.com/futurama/350/200/1" alt="">
  <div class="container-progress">
    <div class="progressbar">
      <div class="skill"><span>HTML 5</span></div>
    </div>
  </div>
</div>

Live example