vertical-align: middle

[Wagner Martins - SC 0]

Estou querendo centralizar uma imagem dentro de um <li></li>, a propriedade vertical-align: middle só alinha texto imagem não, existe alguma forma para centralizar uma imagem qto horizontalmente qto verticalmente?

 

Valeu

[William Bruno 1501]

Sim, existe.. porém da um pouco de trabalho.

 

trate a imagem como se ela fosse um texto.

usando line-height e o vertical-align é possível.

[Wagner Martins - SC 0]

Seria assim?

 

#fotos_projetos_min li {
width:230px;
height:180px;
float:left;
border:1px solid grey;
margin:3px;
line-height:300px;
vertical-align:middle;
}

 

Desse modo algumas imagens foram pro centro verticalmente outras não, como ficaria o código para centralizar?

[William Bruno 1501]

não, o line-height deve ter o mesmo valor do height (no container)

 

e o vertical-align fica na imagem

[Evandro Oliveira 331]

quem recebe vertical-align, como já foi dito, são os elementos de linha. Basta isso, sem necessidade de line-height.

[Henrique Barcelos 290]

Olha, eu não testei nem nada, mas é o seguinte: a propriedade display padrão para imagens é inline-block, que é um híbrido entre inline e block...

Tente fazer assim:

#fotos_projetos_min li img {
   display: inline;
}