Vertical-Align a Block Element

Question

I have an image and text next to each other in a div. I'm trying to align the text vertically aligned in the middle, but it stays on top. Please help!

http://jsfiddle.net/9KDva/

HTML:

<div class="title-block">
  <div class="img-holder"><img width="101" height="104" src="http://www.test.com/test.jpeg" /></div>
  <div class="title">Get Your Nose Out of Your IPhone</div>
</div>

CSS:

.title-block {
width:272px;
height: 110px;
vertical-align:middle;
}

.img-holder {
float: left;
margin: 0 6px 0 0;
position: relative;
}

.img-holder img {
display: block;
}

.title {
display:block;
text-transform: uppercase;
margin: 8px 0 9px;
}

Answer 1

You can use table and table-cell: And move your class='title' inside img-holder

Fiddle

With padding left away from image - fiddle

.title-block {
    width:272px;
    height: 110px;    
}

.img-holder {    
    margin: 0 6px 0 0;
    position: relative;
    display: table;
}

img, .title{
    display:table-cell;
    vertical-align: middle;
}
.title {
    text-transform: uppercase;
    margin: 8px 0 9px;  
}