I know it is an ancient question but none of the existing solution worked for me.

I want to vertically align #name\_post & #pic\_post in center. 

This is my code. If you run the code snippet you will see that I failed. 

```css
.circular {
 width: 30px;
 height: 30px;
 border-radius: 15px;
 -webkit-border-radius: 15px;
 -moz-border-radius: 15px;
 box-shadow: 0 0 8px rgba(0, 0, 0, .8);
 -webkit-box-shadow: 0 0 8px rgba(0, 0, 0, .8);
 -moz-box-shadow: 0 0 8px rgba(0, 0, 0, .8);
  top: 50%;
  margin-top: 5px;
}
.heading_post{
 display; table-cell;
 vertical-align: middle;
   padding-left: 10px;
}
.heading_name
{
 color: #45619d;
}
#pic_post, #name_post{
 display:inline;
}
#name_post_name, #name_post_work{
 display:inline;
}

.name{
 background-color: #dedfe1;
 border-radius:15px 15px 15px 15px;
 -webkit-border-radius:15px 15px 15px 15px;
 -o-border-radius:15px 15px 15px 15px;
 -moz-border-radius:15px 15px 15px 15px;
 margin: 0px;
 display: table;
 width: 100%;
}
```

```html
 <li class="item">
             <div class= "name">
              <img id="pic_post" class="circular" src="http://cdn.makeuseof.com/wp-content/uploads/2009/11/android_small.png" alt="" />
              <div id="name_post" class= "heading_post">
               <h5 id="name_post_name" class="heading_name">Tamzeed Islam</h5>
               <h5 id="name_post_work">posted on web</h5>
              </div>
             </div>
              <p id="post_details" class="details">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat.</p>
            </li>
```