Como alinhar imagem na horizontal e vertical?
Estou tentando centralizar uma imagem na horizontal e na vertical mas não consigo sucesso na vertical. Tentei o seguinte:
<div class="psicoterapeutas">
<div class="foto">
<span></span><img src="images/foto.jpg" width="150" height="190" />
</div>
<div class="dados">
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc nec mauris eu sem eleifend convallis. Nulla turpis arcu, venenatis quis venenatis eu, consectetur vel libero. Sed eros odio, suscipit non sodales quis, convallis a quam. Sed sagittis luctus ligula, non semper diam aliquet vel. </p>
<p>Área(s) de atuação:</p>
<p>Contato:</p>
</div>
</div>
.psicoterapeutas {
background-color: #CCC;
height: 300px;
width: 600px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
.foto {
background-color: #999;
float: left;
height: 300px;
width: 200px;
text-align: center;
display:table-cell;
vertical-align:middle;
}
.foto * {
vertical-align: middle;
}
.foto span {
display: inline-block;
height: 100%;
}
.dados {
background-color: #09F;
float: right;
height: 300px;
width: 400px;
}Discussão (1)
Carregando comentários...