Alinhando problema para web design html / css. violino incluído. - html, css, css3, design responsivo

Eu estou tentando projetar um layout responsivo emque existe uma imagem e um parágrafo lado a lado e a imagem é alinhada verticalmente com o texto (a altura do parágrafo muda com ajustes na largura do navegador).

Aqui está o meu código de groselha http://jsfiddle.net/xSrpt/

Eu tentei usar

    vertical-align:middle;

e

    vertical-align:central;

no pai div (#intro) e não foram capazes de chegar a lugar nenhum com ele. Eu sinto que isso deve ser uma solução fácil e estou faltando alguma coisa, mas espero que vocês possam ajudar.

por favor inclua um violino funcional com sua resposta.

Muito obrigado!

Respostas:

1 para resposta № 1

Apenas para adicionar um comentário à resposta acima (rep muito baixo). Não é necessário converter o div em tabela.

Tudo o que você precisa fazer é aplicar vertical-align: middle to elemento filho e não o pai.

#intro > * { vertical-align:middle }

Aqui está seu violino bifurcado. http://jsfiddle.net/UBD6S/

solução muito mais simples.

---

1 para resposta № 2

tente adicionar ao seu pai - display:table-cell;

editar:

você precisa fazer o div "agir" como uma tabela, como abaixo:

CSS:
#intro{
display:table; /** table **/
width:90%;
background-color: #999;
padding:5%;
}
#pic{
height:100%;
width:80px;
background:black;
display:table-cell; /** table-cell **/
vertical-align:middle;
}
#your_pic {
width:80px;
height:80px;
background:#fff;
}
#p{
display:inline-block;
width:80%;
}

HTML:
<div id="intro">
<div id="pic"><div id="your_pic"></div></div>
<p id="p">text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text </p>
</div>

---