[Resolvido] Alinhar imagem ao centro de uma <li>

o tamanho será sempre fixo ?

então eu alinharia com 'margin'.

e espaço é pequeno.

tem inumeras outras formas, mas essa acho a mais facil de fazer.

Se for para centralizar verticalmente também e a imagem sempre possuir o mesmo valor, faça assim na imagem:

li img{ position: absolute; top: 50%; left: 50%; width: 150px; height: 150px; margin: - 75px 0 0 -75px; }
http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

O tamanho da imagem não é fixa em 100x100. Como eu falei, ela tem as dimensões máxima de 100px de altura e 100px de largura.

Normalmente elas seguem o tamanho 100x75 ou 75x100, e por isso creio que eu n possa fazer a CSS como se fossem 100x100 pra não ficar desalinhado caso eu use o 'margin'.

Uhhn... Sua dúvida é parecida com essa http://forum.imasters.com.br/public/style_emoticons/default/seta.gif http://forum.imasters.com.br/index.php?/topic/386581-centralizar-imagens/

Veja a solução que foi dada e tente aplicar ao seu problema.

Tem uma imagem do resultado final? Fica mais fácil ajudar assim.

http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

Cara, eu fiz isso recentemente.. e apliquei a mesma solução em vários albuns..

teus albuns de fotos serão dinâmicos ? usando php, você consegue pegar ad dimensões da imagem.

centralize horizontalmente com display: block; margin: 0 auto; width: YYpx;

e para centralizar verticalmente

vertical-align: middle;

um exemplo de como funciona:

http://www.loricestetic.com.br/?galeria=1/fotos-de-buenos-aires-2007

Isso William, exatamente! A minha galeria é em PHP.

Na verdade mesmo, eu quero montar o tamanho das <LI> com 150x150 e as miniaturas terão no máximo 120px, tanto na vertical como na horizontal.

Eu vou dar uma olhada no seu exemplo e tentar ajustar aqui no meu assim que puder e depois eu te dou um retorno do resultado.

Obrigado! :D

Tentei fazer baseado no código do site que você me mandou, mas não estou conseguindo.

CSS:

#galerias_minis{
	width:760px;
	margin:0 auto;
	list-style:none;
}

#galerias_minis li{

	display:inline;
	float:left;
	height:100px;
	line-height:100px;
	padding:1px;
	position:relative;
	width:100px;
	margin:2px;
}

#galerias_mini li img{

	margin:0 auto;
	vertical-align:middle;
}

HTML:

<ul id="galerias_mini">
 <li><a href="#"><img src="foto.jpg" /></a></li>
 <li><a href="#"><img src="foto.jpg" /></a></li>
 <li><a href="#"><img src="foto.jpg" /></a></li>
 <li><a href="#"><img src="foto.jpg" /></a></li>
...
</ul>

EDIT - Ele criou o quadrado no tamanho 100x100 direitinho, mas não está alinhando no meio com o vertical-align.

li { line-height: 100px; }

Eu achei no meu css-reset que tinha o vertical-align: baseline por algum motivo, juro que não sei porque botei.

Então adicionei aqui e funcionou:

#galerias_minis li a img {

	border:2px #F90 solid;
	vertical-align:middle;
}

Mas agora o problema é que não está centralizando horizontalmente.

CSS:

#galerias_minis{
	width:760px;
	margin:0 auto;
	list-style:none;
}

#galerias_minis li{

	display:inline;
	float:left;
	height:100px;
	line-height:100px;
	padding:1px;
	position:relative;
	width:100px;
	margin:2px;
}

#galerias_minis li a img {

	border:2px #F90 solid;
	vertical-align:middle;
 margin:0 auto; /* Se eu adiciono o margin e o display:block, ele não alinha mais na vertical e só alinha na horizontal.*/
 display:block;
}

#galerias_minis li a:hover img {

	border:2px #FFF solid;
}

Puts, dei uma olhada por aí e me parece que não haverá solução para o seu problema usando apenas o básico CSS. No CSS3, há como usando table-cell, porém não funciona em todos os browsers. Em JavaScript, você poderia inserir uma função IF para pegar o tamanho (se for muitos tamanhos, aí embaça), e atribuir certa classe para cada. Com JQuery, se o cara desabilitar o JS, já elvis :(

E aí, qual escolher? Eu optaria pelo JQuery, porque, mesmo se o cara desabilitar o JS, a coisa não ficará tão feia assim, ou fica alinhado horizontalmente ou verticalmente :]

Tutorial: http://www.tuliofaria.net/alinhamento-vertical-de-divs-com-javascript-e-jquery/

Obs.: ele ensina a alinhar verticalmente. Para alinhar horizontalmente, apenas adicione o text-align:center;

Falou!

table-cell é css2.1

Afinal, como eu poderia resolver então isto? :P

Da forma mais simples do mundo:

>
usando php, você consegue pegar ad dimensões da imagem.

centralize horizontalmente com display: block; margin: 0 auto; width: YYpx;

http://br.php.net/getimagesize

a margem vem no LI não no UL

o problema é que flutuando e setando em linha, você perde a exibição em bloco e consequentemente o efeito margem.

uma coisa que eu não entendi, se a largura das fotos que é variável até 100px, porque a largura da lista é 100px e não de cada item dela?

se pretende utilizar algum efeito em javascript, procure pelas opções da livraria, as vezes pode ser até mais fácil.

note: definindo a ul com largura de 100px, você só terá a lista na horizontal se a mesma tiver 2 imagens de no máximo 50px ou 3 de 33px etc...

<ul id="menu">
 <li>
 <span>
 <img />
 </span>
 <li>
</ul>

#menu li {

float: left;
}

#menu li span {

display: block;
width: 100px;
height: 100px;
margin: 0 auto;
line-height: 100px;
}

Deixa eu tentar explicar melhor o efeito que pretendo colocar.

Estou criando uma galeria de fotos e estou exibindo as miniaturas, onde o PHP está pegando as thumbs em uma pasta e gerando o código HTML seguindo o esquema abaixo:

<ul id="">
 <li><a href="#"><img src="foto.jpg" /></a></li>
 <li><a href="#"><img src="foto.jpg" /></a></li>
 <li><a href="#"><img src="foto.jpg" /></a></li>
 <li><a href="#"><img src="foto.jpg" /></a></li>
</ul>

Visualmente falando, eu quero que ele tenha o mesmo efeito que eu criasse uma tabela e as miniaturas ficassem alinhadas ao centro, tanto na vertical como na horizontal.

Imaginando ser uma tabela, seria como eu fixasse o tamanho das <td> a um tamanho de 100x100 e as miniaturas dentro dela seriam variáveis até o tamanho máximo de 100px.

Com o código CSS do meu post ali emcima, eu consegui alinhar ao centro verticalmente, mas agora o problema está sendo colocar também alinhado na horizontal simultâneamente, pois só consigo ou um ou outro.

Estive pensando em fazer 2 IDs, uma pra alinhar na horizontal e outra na vertical, e botar o PHP pra verificar as dimensões da imagem e dependendo se a imagem está na horizontal ou vertical, ele aplicar o ID que irá alinhá-lo corretamente.

William, isso que você me mostrou aí, seria pra eu pegar pelo PHP a dimensão e preencher no lugar de "YY" do "width: YYpx"? Em qual seletor eu deveria aplicar isto?

basta utilizar o código que te passei trocando 'span' por 'a'

>
William, isso que você me mostrou aí, seria pra eu pegar pelo PHP a dimensão e preencher no lugar de "YY" do "width: YYpx"? Em qual seletor eu deveria aplicar isto?

sim. inline, diretamente na tag img.

Consegui William!

Muito obrigado pela ajuda!

Gostaria que fosse re-aberto este tópico, pois estou com a mesma dúvida, só que com uma leve modificação.

Estou querendo montar 2 classes, uma para fotos na horizontal e outra pras verticais. E fazer com que o PHP através do getimagesize() ele defina qual classe será posta na <img> para alinhar dentro da <li>.

Com o meu código abaixo, já está centralizando as fotos verticais, mas eu gostaria que não fizesse isso, só quando eu aplicasse as devidas classes pra executar isso.

Segue meu código CSS:

#galerias_minis{
 width:760px;
 margin:0 auto;
 list-style:none;
}

#galerias_minis li{

 display:inline;
 float:left;
 height:100px;
 line-height:100px;
 padding:1px;
 position:relative;
 width:100px;
 margin:2px;
}

#galerias_minis li a img {

 border:2px #F90 solid;
 vertical-align:middle;
 margin:0 auto; /* Se eu adiciono o margin e o display:block, ele não alinha mais na vertical e só alinha na horizontal.*/
 display:block;
}

#galerias_minis li a:hover img {

 border:2px #FFF solid;
}

#galerias_minis li a {

	display: block;
	width: 100px;
	height: 100px;
	margin: 0 auto;
	line-height: 100px;
	vertical-align:middle;
}

.foto_horizontal{

}

.foto_vertical{

}

Ué... Só separar o que está para geral em cada classe ao seu gosto...

Veja o que cada propriedade faz e separe-as em cada classe.

http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif